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


Posted in Javascript onFebruary 27, 2016

 大家都知道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>
Javascript 相关文章推荐
javascript textContent与innerText的异同分析
Oct 22 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
Javascript技术栈中的四种依赖注入小结
Feb 27 #Javascript
javascript的 {} 语句块详解
Feb 27 #Javascript
javascript中eval解析JSON字符串
Feb 27 #Javascript
javascript先序遍历DOM树的方法
Feb 27 #Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 #Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 #Javascript
JS原型、原型链深入理解
Feb 27 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php GUID生成函数和类
2014/03/10 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
西双版纳导游词
2015/02/03 职场文书