一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

frame 高度設(shè)置、iframe 自適應(yīng)高度方法總結(jié)

 黃三歲大愛人生 2017-09-17

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>

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多

    日本午夜免费观看视频| 日韩夫妻午夜性生活视频| 中文字幕人妻av不卡| 亚洲欧美日产综合在线网| 人妻中文一区二区三区| 日本最新不卡免费一区二区| 日韩欧美一区二区不卡看片| 欧美成人久久久免费播放| 女人精品内射国产99| 欧美不卡高清一区二区三区| 九九热在线免费在线观看| 欧美黑人精品一区二区在线| 亚洲欧洲在线一区二区三区| 欧美91精品国产自产| 中文久久乱码一区二区| 午夜精品久久久免费视频| 极品少妇一区二区三区精品视频| 尤物久久91欧美人禽亚洲| 九九热九九热九九热九九热| 欧美日韩国产黑人一区| 亚洲一区二区精品免费| 一二区中文字幕在线观看 | 欧美黄色成人真人视频| 精品日韩国产高清毛片| 欧美成人精品一区二区久久| 日本人妻精品中文字幕不卡乱码| 中文字幕精品一区二区年下载| 欧美日韩乱一区二区三区| 大尺度剧情国产在线视频| 成人免费视频免费观看| 欧美高潮喷吹一区二区| 国产成人精品一区二区在线看| 亚洲伦片免费偷拍一区| 国产精品十八禁亚洲黄污免费观看| 欧美午夜不卡在线观看| 中文字幕亚洲精品人妻| 欧美字幕一区二区三区| 亚洲国产精品久久网午夜| 高潮日韩福利在线观看| 亚洲国产精品一区二区毛片| 欧美不卡午夜中文字幕|