綠色資源網(wǎng):您身邊最放心的安全下載(zǎi)站! 最新軟件|熱(rè)門排行|軟件分類|軟件專(zhuān)題|廠商大全

綠色資源網

技術(shù)教程
您的位置:首頁網頁設計HTML/CSS → iframe 高度設置、iframe 自適應高度方法(fǎ)總結

iframe 高(gāo)度設置、iframe 自適(shì)應高度方法總結

我要評論 2014/04/07 13:50:35 來源:綠色(sè)資源網 編輯:www.ynaad.com [ ] 評論:0 點擊:310次

謂iframe自(zì)適應高度,就是,基於界麵美(měi)觀和交互的考慮,隱藏了iframe的border和scrollbar,讓人看(kàn)不出它是個iframe。如果iframe始終調用同一個固定(dìng)高度的頁麵,我(wǒ)們直接寫死iframe高度就可(kě)以了。而如果iframe要切換頁麵,或者被包含頁麵要做DOM動態操作(zuò),這時候,就需要(yào)程(chéng)序去同步(bù)iframe高度和被包含頁的實際高度了。

如果iframe的高度沒(méi)有確定,那將是初始的高度。
iframe是網頁(yè)中的一部分,其大小(xiǎo)還要受到網頁的限(xiàn)製,設置最高可以使用height="100%"。
基本上解決iframe超出的高度都是(shì)增加了滾動條來實現的,很簡單,如果你iframe中的信息超出了一屏幕,你就必須使用滾動條了。

開始(shǐ)用的時候還不行,後來發現是因為js跨域問題,沒有權限。後來設置了window.document.domain 就可以了,用的是jquery代碼2方法。

跨域下的iframe自適應高度

跨域的時候,由於(yú)js的同(tóng)源策略,父頁麵內的js不能獲取到(dào)iframe頁麵的高度。需要(yào)一個頁麵來做代理(lǐ)。
方法如下:假(jiǎ)設www.a.com下的一(yī)個頁麵a.html要包含www.b.com下的一個頁麵c.html。
我(wǒ)們使用www.a.com下的另一個頁麵agent.html來做代理,通過它獲(huò)取iframe頁麵的(de)高度,並設定iframe元素的高度。

a.html中包含iframe:
<iframe src="http://www.b.com/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.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; 
    })();
</script>

最後,agent.html中放入一段js:
<script type="text/javascript">
    var b_iframe = window.parent.parent.document.getElementById("Iframe");
    var hash_url = window.locations.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中(zhōng)獲得寬度值和高度值,並(bìng)設置(zhì)iframe的高度和寬(kuān)度(因為agent.html在www.a.com下,所以操作a.html時不(bú)受JavaScript的同源限製)

超級簡單的方法,也不用寫什麽判斷瀏覽器(qì)高度、寬度啥的(de)。
下麵的兩種方法自選其(qí)一就行(háng)了。一個是放在和iframe同頁麵的,一個是放在test.html頁麵的。
注意別放錯(cuò)地方了哦。

下麵是其他兩種方法:
iframe代碼,注意要寫(xiě)ID

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代(dài)碼1:

//注意:下麵的代碼是放在(zài)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:

//注意:下麵(miàn)的代碼是放在和iframe同一個頁麵調用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
}); 

第二種有效,不過要注意一點是,增加的JS要寫在iframe下麵,放在頭部是測(cè)試沒有效果(guǒ)。
測試代碼:
<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">
//注意:下麵的代碼是(shì)放在和iframe同一個(gè)頁麵調用,放在iframe下麵
$("#mainframe").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
 $(this).height(mainheight);
});
</script>

關鍵詞:iframe

閱讀本文(wén)後您有什麽感想(xiǎng)? 已有 人給出評價!

  • 2 歡迎喜歡
  • 2 白癡
  • 2 拜托(tuō)
  • 2 哇
  • 2 加油
  • 2 鄙視
免费人欧美成又黄又爽的视频丨一本色道久久88综合日韩精品丨国产专区日韩精品欧美色丨午夜无遮挡男女啪啪视频丨国产欧美日韩综合精品一区二区丨亚洲精品无码不卡在线播HE丨亚洲精品国产精品国自产观看丨日韩国产高清av不卡