精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
frame 高度設置、iframe 自適應高度方法總結

http://www.cr173.com/html/28045_1.html

謂iframe自適應高度,就是,基于界面美觀和交互的考慮,隱藏了iframe的border和scrollbar,讓人看不出它是個iframe。如果iframe始終調用同一個固定高度的頁面,我們直接寫死iframe高度就可以了。而如果iframe要切換頁面,或者被包含頁面要做DOM動態操作,這時候,就需要程序去同步iframe高度和被包含頁的實際高度了。

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

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

跨域下的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" 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.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中獲得寬度值和高度值,并設置iframe的高度和寬度(因為agent.html在www.a.com下,所以操作a.html時不受JavaScript的同源限制)

超級簡單的方法,也不用寫什么判斷瀏覽器高度、寬度啥的。
下面的兩種方法自選其一就行了。一個是放在和iframe同頁面的,一個是放在test.html頁面的。
注意別放錯地方了哦。

下面是其他兩種方法:
iframe代碼,注意要寫ID

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

jquery代碼1:

//注意:下面的代碼是放在test.html調用
$(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同一個頁面調用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
}); 

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

本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
JS跨域獲取設置iframe高度(前提-跨域的頁面可操作)
window.dialogArguments js取得父窗口中list
JavaScript專題(二):深入理解iframe
網頁制作中Iframe自適應高度的解決辦法
ajax跨域、iframe跨域和JS跨域通信的幾種解決方案
優雅絕妙的Javascript跨域問題解決方案
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 内丘县| 潍坊市| 收藏| 三原县| 澎湖县| 永年县| 海门市| 侯马市| 石门县| 三明市| 赫章县| 鄂伦春自治旗| 宕昌县| 安达市| 钟山县| 伊宁市| 黄浦区| 铜鼓县| 江津市| 台江县| 嘉义县| 山西省| 如东县| 阜新市| 桐庐县| 石台县| 石首市| 阳西县| 通山县| 长寿区| 武胜县| 那曲县| 麟游县| 凤庆县| 美姑县| 大姚县| 申扎县| 仙桃市| 沭阳县| 平泉县| 白朗县|