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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
vue axios同步请求解决方案
Sep 29 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
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
js select常用操作控制代码
2010/03/16 Javascript
js function定义函数使用心得
2010/04/15 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
python实现的系统实用log类实例
2015/06/30 Python
Python实现带百分比的进度条
2016/06/28 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
中国制造网:Made-in-China.com
2019/10/25 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
家长会邀请书
2014/01/25 职场文书
市场总经理岗位职责
2014/04/11 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
师德承诺书2015
2015/04/28 职场文书
唐山大地震观后感
2015/06/05 职场文书
2019公司管理制度
2019/04/19 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
Python List remove()实例用法详解
2021/08/02 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python