iframe不同主域名跨域问题

最新推荐文章于 2024-07-22 18:22:02 发布

weixin_33907511

最新推荐文章于 2024-07-22 18:22:02 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/wangdk/blog/170147

本文介绍了一种解决不同主域名下iframe跨域及自动调整高度的方法。通过在目标域内再次嵌套源站的iframe，实现了双层iframe间的通信，解决了因主域名不同而产生的跨域限制问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不同主域名跨域和iframe自动高度

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

转载于:https://my.oschina.net/wangdk/blog/170147