南强小屋 Design By 杰米
大家都知道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="/UploadFiles/2021-04-02/jquery-1.7.1.min.js">
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="/UploadFiles/2021-04-02/jquery-1.7.1.min.js">
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>
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无JavaScript实现iframe自动高度调整和不同主域名跨域的评论...