解决Cross Domain的自动调整Iframe高度

最近组里有点小忙，用公司自己的Force.com平台写的Customer Support应用刚刚Pilot，在做Code Refactoring。今天又被分配一个任务要在一个页面里嵌入另一个页面，如果这两个页面在同一个域名下的话，很容易或者子页面的ScrollHeight就可以了。

我的问题就是两个页面不在同一个Domain里面，于是Parent就不能访问Child Frame的一些参数，找了半天终于找到一个牛人的[url＝http://www.pixelmedia.com/blog/dynamic-iframe-height/]解决方案[/url]。通过把Child Frame的实际高度放在Location的Hash值里传给Parent再刷新Parent。

以下给出一个没有用JQuery的版本：

在Child Frame里要加上的Javascript代码：

<script>
var parentUrl = "http://example/parent.html";
setHash = function() {
    var body = document.getElementByTagName('body');
    if (body.length>0)
          parent.location = parentUrl + "#" + body[0].clientHeight;
}();
</script>


Parent页面里面要加入Javascript

function setHeight() {
    var childFrame = document.getElementById('ChildFrameId');
    var newHeight = parseInt(location.hash.substring(1)) + 50;
    childFrame.height = newHeight;
    childFrame.style.visibility = 'visible';
}

Parent页面里的Iframe片段

<iframe src="http://abc.com/page1.html" width='100%' height='100%' style='visibility:hidden' onload='javascript:setHeight();' frameborder ='0' />

这里我给Iframe加了一个隐藏的Style，当调整好高度以后再显示，为了不显示初次读取时的滚动条。相信大家都应该知道Display和Visibility在CSS里的区别了吧，不知道的话请看这里

基本上我觉得Cross Domain情况下调整Iframe的高度用这种方法应该是最简单了，但是就是无法解决如果原先URL就有Hash的情况（会被覆盖掉，失去书签功能），还望高人指点。