JavaScript实现iframe自动高度调整和不同主域名跨域

前端技术 2023/09/04 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>

本文地址：https://www.stayed.cn/item/10176

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案