跨域下的iframe自适應高度

跨域下的iframe自适應高度跨域的時候，由于js的同源政策，父頁面内的js不能擷取到iframe頁面的高度。需要一個頁面來做代理。 方法如下：假設www.a.com下的一個頁面a.html要包含www.b.com下的一個頁面c.html。 我們使用www.a.com下的另一個頁面agent.html來做代理，通過它擷取iframe頁面的高度，并設定iframe元素的高度。 a.html中包含iframe:<iframe src="http://www.b.com/c.html" id="Iframe" frame scrolling="no" style="border:0px;"></iframe>

在c.html中加入如下代碼：<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe>

<script type="text/javascript">

(function autoHeight(){

var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);

var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

var c_iframe = document.getElementById("c_iframe");

c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 這裡通過hash傳遞b.htm的寬高

})();

</script>

最後，agent.html中放入一段js:<script type="text/javascript">

var b_iframe = window.parent.parent.document.getElementById("Iframe");

var hash_url = window.location.hash;

if(hash_url.indexOf("#")>=0){

var hash_width = hash_url.split("#")[1].split("|")[0]+"px";

var hash_height = hash_url.split("#")[1].split("|")[1]+"px";

b_iframe.style.width = hash_width;

b_iframe.style.height = hash_height;

}

</script>