第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

跨域的iframe如何做高度自適應

跨域的iframe如何做高度自適應

慕田峪4524236 2019-03-23 14:19:10
最近遇到了這個棘手的問題,主要是在設計widget類應用時遇到的,如果我們給用戶提供一段代碼嵌入到它自己的個人站點上,就類似現(xiàn)在的微博組件之類的,如果用純iframe實現(xiàn),在自適應高度上會遇到不小的麻煩比如我們在a.com上貼上iframe代碼<iframe id="test-frame" frameborder="0" src="http://b.com/frame.html"></iframe>如果我們要實現(xiàn)高度自適應,在b.com的frame.html上就要實現(xiàn)如下代碼<script>parent.document.getElementById('test-frame').style.height = document.body.offsetHeight + 'px';</script>也就是子框架告訴父框架現(xiàn)在的高度。不過幾乎在所有瀏覽器上你都會遇到Unsafe JavaScript attempt to access frame with URL。這可能引出一個更大的問題了,也就是父子iframe之間的跨域通信。我試了所有的方法,子框架不能調(diào)用父框架的任何方法,不能獲取父框架的任何變量,當然也不能設置任何變量。 也許你要說能否試試在父框架調(diào)用子框架的方法,比如我們在父框架里加上<script>var io = document.getElementById('test-frame'), doc = io.contentWindow ? io.contentWindow.document : io.contentDocument ? io.contentDocument : io.document;io.style.height = doc.body.offsetHeight + 'px';</script>但是很遺憾,我們會遇到跟上面如出一轍的錯誤,也就是說父框架不能操作子框架的任何變量以及代碼,這條路也死了。各位有什么更好的辦法,讓它們之間起碼能傳遞一些小的信息。對使用第三方proxy做通信的一些看法@yanyaoer 說的方法可以基本行得通,也就是在父框架和子框架之間用第三方proxy建立一個通信通道,但是這樣成本太高,特別是做widget類應用,每次請求我都要維護這樣一個通道,就算是用緩存實現(xiàn)也非常消耗資源,我希望能純在客戶端解決,不要服務端的介入針對Macji的答案被我找到了,09年做的,見笑了。 還運行在淘寶線上,哈哈: 1. b.com載入a.com的js, 參考 http://a.tbcdn.cn/app/ishop/js/api_lo... 2. 這個js創(chuàng)建一個iframe,這個iframe帶著b.com的高度,參考 http://ishop.taobao.com/proxy.html 3. proxy.html 去修改a.com的iframe高度Macji用的方法很巧妙,但是有個非常重要的細節(jié)他忘了說,這個proxy.html應該在a.com下面。因為只有跟a.com同域才能與同為a.com的父框架通信。他們之間是三層嵌套的關系,在最上層的a.com往下看html代碼,可以表示為<!-- a.com --><iframe id="frame" src="http://b.com/">    <!-- b.com -->    <iframe src="http://a.com/proxy.html?height=111">        <!-- a.com/proxy.html -->        <script>        // 因為它與a.com同域所以可以直接調(diào)用最上層框架的代碼        top.document.getElementById('frame').height = query.height;        </script>    </iframe></iframe>如果說b.com是widget的服務商的話,那么a.com就是客戶的網(wǎng)站,所以我們在提供一段html代碼供用戶復制的同時,還必須要用戶在它的域名下面埋一個proxy.html,這個跟我們的需求有些出入,但是已經(jīng)是目前最好的解決方案了,實際上facebook就是這么干的。
查看完整描述

6 回答

?
撒科打諢

TA貢獻1934條經(jīng)驗 獲得超2個贊

使用postMessage來跨域iframe通訊,或者如同樓上的方法


查看完整回答
反對 回復 2019-04-11
?
慕哥9229398

TA貢獻1877條經(jīng)驗 獲得超6個贊

學一下微博秀。在生成iframe的時候,指定一下高度。


查看完整回答
反對 回復 2019-04-11
  • 6 回答
  • 0 關注
  • 692 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號