跨域、字頁面高度動態(tài)變化
這里結(jié)合了第2、第4兩種方法,我的想法是在B頁面通過一個計時器,不停計算B頁面的高度,一但變化,馬上修改iframe標簽的src屬性,而C頁面也有計時器不斷監(jiān)聽src的變化,改變Aiframe標簽的高度。需要注意的是僅僅修改src屬性后面的錨點值(如“#1234”),頁面并不會刷新,不會重新請求,這也是在C頁面增加計時器的原因。
DEMO
//B頁面腳本 (function(){ var getHeight = function(){ return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight); }; var preHeight = getHeight(), agent_iframe; var createIframe = function(height){ agent_iframe = document.createElement("iframe"); agent_iframe.style.height = "0"; agent_iframe.style.width = "0"; agent_iframe.style.border = "none"; agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + height; document.body.appendChild(agent_iframe); } createIframe(preHeight); var checkHeight = function(){ var currentHeight = getHeight(); if(currentHeight != preHeight){ agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + currentHeight; preHeight = currentHeight; } setTimeout(checkHeight,500); } setTimeout(checkHeight,500); })();
//C頁面腳本 (function(){ var preHeight = parseInt(window.location.hash.substring(1),10), ifrmae = window.top.document.getElementById("frame_content_parent"); ifrmae.height = preHeight; setInterval(function(){ var newHeight = parseInt(window.location.hash.substring(1),10); if (newHeight !== preHeight){ ifrmae.height = newHeight; preHeight = newHeight; } },500); })();
這里還有另一種方案,就是讓iframe每一次都重新請求,這樣C頁面就不需要計時器了,但是如果2次計算高度重復(fù)的話,就會導(dǎo)致src屬性的值相同,這樣瀏覽器就很可能不重新請求該頁面了,那么C頁面中的腳本也就不運行了。要修復(fù)這個問題很簡單,只要在每次計算出來的src屬性上增加一個隨機數(shù)的參數(shù)就行了。比如http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?temp=123123423712937#1563
//B頁面關(guān)鍵腳本 agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?a=" + Math.random() + "#" + currentHeight;
//C頁面腳本 window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);
原文:http://ued.koubei.com/?p=1217
本文鏈接:http://www.95time.cn/tech/web/2010/7986.asp
出處:口碑網(wǎng)UED Team
責任編輯:bluehearts
上一頁 三談Iframe自適應(yīng)高度 [2] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|