首頁 > 開發者 > JavaScript
大家都知道Js有同源策略，就是主網域名稱不同嵌套的iframe不允許Js通訊的。
比如我有一個網站，網站中要嵌入其網站的頁面。那麼我可以使用iframe引用第三方網站的地址即可。
但是問題也來的iframe的高度是固定的不能與第三方網站很好的融合，又例如第三方網站使用了瀑布流外掛程式，要滾動式載入自動計算高度，那麼先說跨域：iframe主網域名稱不同跨域方法，假如網站 A.com B.com A 裡面放入一個iframe 引用了B.com，這種情況下B.com裡面的Js是無法訪問到A.com的。JS跨域必須是同源，就是同一個主網域名稱，那腫麼辦呢？
我們可以在B.com中在引入一個iframe，暫且叫C吧 這個iframe載入A.com中的一個網頁。這樣同源就有了B.com中的iframe中的網頁就可以和A.com通訊了。下面只要B和C通訊，讓C和A通訊就完成B->A通訊，這樣當B高度變化時通知C，讓C通知A把iframe高度調整。
B和C通訊，其實通過url地址就可以實現通訊了，B.com iframe設定為隱藏，改變src地址時候C就可以接收。
廢話不說了上代碼
A.com/index.html
<html> <script src="{$smarty.const.STATIC_URL}/js/jquery-1.7.1.min.js"></script> <script> var test = function() { $('#h1').html('test'); } </script><body><h1 id="h1">nba.alltosun.net</h1><iframe id="ifm" width="760" height="100" src="http://***.sinaapp.com/"></iframe></body></html>
B.com/index.html
<html><head></head><body> <h1>**.appsina.com</h1> <button id="button">設定高度</button> <div id="div" style="height:200px;display:none;"></div> <script src="http://nba.alltosun.net/js/jquery-1.7.1.min.js"></script> <script> $(function(){ window.ifrH = function(e){ var searchUrl = window.location.search; var b = null; var getParam = function(url, param) { var q = url.match(new RegExp( param + "=[^&]*")), n = ""; if (q && q.length) { n = q[0].replace(param + "=", ""); } return n; } var f = getParam(searchUrl,"url"), h = getParam(searchUrl, "ifmID"), k = getParam(searchUrl, "cbn"), g = getParam(searchUrl, "mh"); var iframeId = 'testiframe'; var iframe = document.getElementById(iframeId); var divId = 'alltosun'; if (!iframe){ var iframe = document.createElement('iframe'); iframe.id = iframeId; iframe.style.display = "none"; iframe.width = 0; iframe.height = 0; document.body.appendChild(iframe); } if (e && e.type == "onload" && h) { b.parentNode.removeChild(b); b = null; } if (!b) { b = document.createElement("div"); b.id = divId; b.style.cssText = "clear:both;" document.body.appendChild(b); } var l = b.offsetTop + b.offsetHeight; iframe.src = (decodeURIComponent(f) || "http://*****/test2") + "&h=" + l + "&ifmID=" + (h || "ifm") + "&cbn=test" + "&mh=" + g + "&t=" + ( (+ new Date())); if (e && e.type =="onload") { window.onload = null; } } window.onload = function() { ifrH({type: "onload"}); } // ifrH(); $('button').click(function(){ $('div').show(); ifrH(); }) }) </script></body></html>
C 代理檔案
<script>var search = window.location.search,getSearchParam = function (search, key) { var mc = search.match (new RegExp ( key + "=([^\&]*)") ), ret=""; mc && mc.length && (ret = mc[0].replace( key + "=","")); return ret;},// 參數h h = getSearchParam(search,"h"),ifmID = getSearchParam(search,"ifmID"),cbn = getSearchParam(search,"cbn"),// 寬高mh = getSearchParam(search,"mh") || h,isFunction = function(fn){ return !!fn && !fn.nodeName && fn.constructor != String && fn.constructor != RegExp && fn.constructor != Array && (/function/i).test(fn + "");}; try{ if(parent && parent.parent){ ifm = parent.parent.document.getElementById(ifmID); ifm && mh && (ifm.height=mh); fn=parent.parent[cbn]; isFunction(fn) && fn.call(); ifm=null; }}catch(ex){ console.log(ex);} </script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
