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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
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
IStream与TStream之间的相互转换
2008/08/01 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python导入pandas具体步骤方法
2019/06/23 Python
python matlab库简单用法讲解
2020/12/31 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
《第一朵杏花》教学反思
2014/04/16 职场文书
《称象》教学反思
2014/04/25 职场文书
运动会广播稿100字
2014/09/14 职场文书
应届生简历自我评价
2015/03/11 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
详解Java实践之适配器模式
2021/06/18 Java/Android