http://www.cr173.com/html/28045_1.html 謂iframe自適應(yīng)高度,就是,基于界面美觀和交互的考慮,隱藏了iframe的border和scrollbar,讓人看不出它是個(gè)iframe。如果iframe始終調(diào)用同一個(gè)固定高度的頁(yè)面,我們直接寫死iframe高度就可以了。而如果iframe要切換頁(yè)面,或者被包含頁(yè)面要做DOM動(dòng)態(tài)操作,這時(shí)候,就需要程序去同步iframe高度和被包含頁(yè)的實(shí)際高度了。 如果iframe的高度沒有確定,那將是初始的高度。 iframe是網(wǎng)頁(yè)中的一部分,其大小還要受到網(wǎng)頁(yè)的限制,設(shè)置最高可以使用height="100%"。 基本上解決iframe超出的高度都是增加了滾動(dòng)條來(lái)實(shí)現(xiàn)的,很簡(jiǎn)單,如果你iframe中的信息超出了一屏幕,你就必須使用滾動(dòng)條了。 開始用的時(shí)候還不行,后來(lái)發(fā)現(xiàn)是因?yàn)閖s跨域問題,沒有權(quán)限。后來(lái)設(shè)置了window.document.domain 就可以了,用的是jquery代碼2方法。 跨域下的iframe自適應(yīng)高度
跨域的時(shí)候,由于js的同源策略,父頁(yè)面內(nèi)的js不能獲取到iframe頁(yè)面的高度。需要一個(gè)頁(yè)面來(lái)做代理。 方法如下:假設(shè)www.下的一個(gè)頁(yè)面a.html要包含www.下的一個(gè)頁(yè)面c.html。 我們使用www.下的另一個(gè)頁(yè)面agent.html來(lái)做代理,通過它獲取iframe頁(yè)面的高度,并設(shè)定iframe元素的高度。
a.html中包含iframe: <iframe src="http://www./c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>
在c.html中加入如下代碼: <iframe id="c_iframe" height="0" width="0" src="http://www./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; })(); </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> agent.html從URL中獲得寬度值和高度值,并設(shè)置iframe的高度和寬度(因?yàn)閍gent.html在www.下,所以操作a.html時(shí)不受JavaScript的同源限制) 超級(jí)簡(jiǎn)單的方法,也不用寫什么判斷瀏覽器高度、寬度啥的。 下面的兩種方法自選其一就行了。一個(gè)是放在和iframe同頁(yè)面的,一個(gè)是放在test.html頁(yè)面的。 注意別放錯(cuò)地方了哦。 下面是其他兩種方法: iframe代碼,注意要寫ID
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
jquery代碼1:
//注意:下面的代碼是放在test.html調(diào)用 $(window.parent.document).find("#main").load(function(){ var main = $(window.parent.document).find("#main"); var thisheight = $(document).height()+30; main.height(thisheight); });
jquery代碼2:
//注意:下面的代碼是放在和iframe同一個(gè)頁(yè)面調(diào)用 $("#main").load(function(){ var mainheight = $(this).contents().find("body").height()+30; $(this).height(mainheight); }); 第二種有效,不過要注意一點(diǎn)是,增加的JS要寫在iframe下面,放在頭部是測(cè)試沒有效果。 測(cè)試代碼: <iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist" frameborder="0" width="100%" scrolling="no" height="100%"></iframe> <script type="text/javascript"> //注意:下面的代碼是放在和iframe同一個(gè)頁(yè)面調(diào)用,放在iframe下面 $("#mainframe").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); </script>
|