亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

iframe 自適應(yīng)大小實(shí)現(xiàn)代碼

  發(fā)布時(shí)間：2009-08-08 00:05:06   作者：佚名   我要評(píng)論
js對(duì)跨域iframe訪問問題,因?yàn)橐刂芶.html中iframe的高度和寬度就必須首先讀取得到b.html的大小,A、B不屬于同一個(gè)域,瀏覽器為了安全性考慮，使js跨域訪問受限,讀取不到b.html的高度和寬度.
頁面域關(guān)系：

主頁面a.html所屬域A：chabaoo.cn
被iframe的頁面b.html所屬域B：www.jb51.cn,假設(shè)地址：http://www.jb51.cn/b.html

實(shí)現(xiàn)效果：

A域名下的頁面a.html中通過iframe嵌入B域名下的頁面b.html,由于b.html的寬度和高度是不可預(yù)知而且會(huì)變化的,所以需要a.html中的iframe自適應(yīng)大小.

問題本質(zhì):

js對(duì)跨域iframe訪問問題,因?yàn)橐刂芶.html中iframe的高度和寬度就必須首先讀取得到b.html的大小,A、B不屬于同一個(gè)域,瀏覽器為了安全性考慮，使js跨域訪問受限,讀取不到b.html的高度和寬度.

解決方案:

引入代理代理頁面c.html與a.html所屬相同域A，c.html是A域下提供好的中間代理頁面，假設(shè)c.html的地址：chabaoo.cn/c.html,它負(fù)責(zé)讀取location.hash里面的width和height的值,然后設(shè)置與它同域下的a.html中的iframe的寬度和高度.

代碼如下：

a.html代碼

首先a.html中通過iframe引入了b.html
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.jb51.cn/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>

b.html代碼

復(fù)制代碼
代碼如下:

<script type=”text/javascript”>
var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth);
var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight);
var c_iframe = document.getElementById(”c_iframe”);
c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //http://chabaoo.cn/c.html#width|height”
}
</script>
<!–js讀取b.html的寬和高,把讀取到的寬和高設(shè)置到和a.html在同一個(gè)域的中間代理頁面車c.html的src的hash里面–>
<iframe id=”c_iframe” height=”0″ width=”0″ src=”http://chabaoo.cn/c.html” style=”display:none” ></iframe>

c.html代碼

復(fù)制代碼
代碼如下:

<script type=”text/javascript”>
var b_iframe = parent.parent.document.getElementById(”b_iframe”);
var hash_url = window.location.hash;
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>

a.html中的iframe就可以自適應(yīng)為b.html的寬和高了.

其他一些類似js跨域操作問題也可以按這個(gè)思路去解決

相關(guān)文章

  • iframe如何刷新的三種實(shí)現(xiàn)方案

    iframe如何刷新一直都被網(wǎng)友所關(guān)注，接下來為大家詳細(xì)介紹下三種:用iframe的name屬性定位/id屬性定位/當(dāng)iframe的src為其它網(wǎng)站地址時(shí),感興趣的朋友可以參考下哈
    2013-03-29

  • iframe的src設(shè)置為about:blank之后細(xì)節(jié)探討

    不設(shè)置為about:blank，內(nèi)存不會(huì)釋放掉。還必須用 iframe.document.write(''); 這樣才能將內(nèi)容清空，本文將詳細(xì)探討一下iframe的src設(shè)置為about:blank之后細(xì)節(jié)，感興趣的你
    2013-02-25

  • iframe的src賦值問題(服務(wù)器端)

    frame的src賦值的問題，本文將進(jìn)行詳細(xì)探討:服務(wù)器端的iframe重新src重新賦值,給iframe加一個(gè)ID，再加上runat=server，感興趣的你可不要錯(cuò)過了哈
    2013-02-25

  • 網(wǎng)頁設(shè)計(jì)技巧:iframe自適應(yīng)高度的問題

    所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe
    2012-11-12

  • 為什么要少用Iframe的幾個(gè)原因分析

    iframes 提供了一個(gè)簡(jiǎn)單的方式把一個(gè)網(wǎng)站的內(nèi)容嵌入到另一個(gè)網(wǎng)站中。但我們需要慎重的使用iframe。iframe的創(chuàng)建比其它包括scripts和css的 DOM 元素的創(chuàng)建慢了 1-2 個(gè)數(shù)量級(jí)
    2012-09-05

  • iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)

    iframe一般用來包含別的頁面，例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站的內(nèi)容，為了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe屬性，這里簡(jiǎn)
    2014-10-01

  • 三談Iframe自適應(yīng)高度代碼

    在構(gòu)建B/S系統(tǒng)界面的時(shí)候，經(jīng)常會(huì)遇到主頁面index.html中嵌套其他頁面的情況 ，雖然已經(jīng)有的庫已經(jīng)提供了控件(例如jQuery easy UI),但是有時(shí)候iframe的使用是不可避免的
    2010-08-06

  • 讓iframe透明的參數(shù)

    有時(shí)候需要讓iframe繼承父頁面的顏色。不需要復(fù)雜的操作，簡(jiǎn)單的幾個(gè)參數(shù)設(shè)置下即可。
    2010-07-21

  • IE6 select z-index無效，遮擋div bug的解決方法

    在最近的一個(gè)項(xiàng)目中，遇到了IE6 select遮擋div的bug，為了解決這個(gè)bug我查了很多資料，試圖找到一個(gè)最最有效的方法，很多人是通過iframe的方法來解決，其實(shí)我查了國外的很
    2010-06-18

  • Iframe 高度自適應(yīng)（兼容IE/Firefox、同域/跨域）

    在實(shí)際的項(xiàng)目進(jìn)行中，很多地方可能由于歷史原因不得不去使用iframe，包括目前正火熱的應(yīng)用開發(fā)也是如此。
    2010-03-17

最新評(píng)論