大家都知道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>