JS解决iframe之间通信和自适应高度的问题


Posted in Javascript onAugust 24, 2016

首先说明下,iframe通信 分为:同域通信 和 跨域通信。

一、 同域通信

所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe

比如: <iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA">的B.html页面,这两个页面数据进行通信,比如我想在父页面A.html 调用子页面当中的函数 我们很容易想到或者google下 document.getElementById('iframeA').contentWindow.b(); 这种方法,其中b 是子页面B.html中的一个函数。但是这样调用下有个问题我纠结了很久,就是既然在火狐下报这样的错误, 如下:

JS解决iframe之间通信和自适应高度的问题

b不是个函数 但是我在子页面明明定义了这么一个函数,那么为什么会报这样的错误呢?经过仔细分析及google,发现有这么一个问题需要理解,当iframe没有加载完成后 我就去执行这个js会报这样的错误,所以就试着在火狐下 用iframe.onload 这个函数 进行测试,果然没有报错,是正确的 所以就确定是这个问题。所以就想写个兼容IE和火狐 google写个函数 来确定iframe已经加载完成!,其实给个回调函数来调用我们上面的方法。

综合上面的思路 就可以写个这样的代码:

<iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA"></iframe>
 <div id="topName">topNddddddddddddddddame</div>
 <script>
  function A(){
  alert("A");
 }
 var iframe = document.getElementById('iframeA');
 
 iframeIsLoad(iframe,function(){
  var obj = document.getElementById('iframeA').contentWindow;
  obj.b();
 });
 
  
 
 
 function iframeIsLoad(iframe,callback){
 if(iframe.attachEvent) {
  
  iframe.attachEvent('onload',function(){
  callback && callback();
  });
 }else {
  iframe.onload = function(){
  callback && callback();
  }
 }
 }

 </script>

B.html 代码如下:

var b = function(){
  alert("B");
 }

子页面调用父页面的函数很简单,只要这样搞下就ok了,window.parent.A();

子页面取父页面元素的值: window.parent.document.getElementById("topName").innerHTML等方法。

二: iframe跨域通信。

 iframe跨域访问一般分为2种情况,第一种是同主域,不同子域的跨域。 第二种是:不同主域跨域。

1、 是同主域下面,不同子域之间的跨域;可以通过document.domain 来设置相同的主域来解决。

假如现在我有个域 abc.example.com 下有个页面叫abc.html, 页面上嵌套了一个iframe 如下:<iframe src="http://def.example.com/demo/def.html"  id="iframe2" style="display:none;"></iframe>,我想在abc域下的页面abc.html 访问 def域下的def.html  我们都知道由于安全性 游览器的同源策略的限制,js不能操作页面不同域下 不同协议下 不同端口的页面,所以就要解决跨域访问了,假如父页面abc.html 页面有个js函数:function test(){console.log(1);}; 我想在子页面调用这个函数 还是按照上面的同域方式调用 parent.test();这样,通过在火狐下看 已经跨域了 解决的办法是 在各个js函数顶部 加一句 document.domain = 'example.com',就可以解决了。

abc.html代码如下:

<iframe src="http://def.example.com/demo/def.html" id="iframe2" style="display:none;"></iframe>

// 跨域 子页调用父页的 函数 (假设是下面test函数)
document.domain = 'example.com';
function test(){console.log(1);};

def.html代码如下:

/*
 * 子页调用父页的方法
 */
document.domain = 'example.com';
//window.top.test();
window.parent.test();

还是这两个页面 我想父页调用子页 如下方法:

a.html代码如下:

/*
 * 跨域 父页想调用子页的的函数
 */
document.domain = 'example.com';
var iframe = document.getElementById('iframe2');
iframeIsLoad(iframe,function(){
 var obj = iframe.contentWindow;
  obj.child();
});
function iframeIsLoad(iframe,callback){
 if(iframe.attachEvent) {
  iframe.attachEvent('onload',function(){
  callback && callback();
  });
 }else {
  iframe.onload = function(){
  callback && callback();
  }
 }
 }

假如现在def.html页面有个child函数 代码如下:

document.domain = 'example.com';
function child(){console.log('我是子页');}

就可以跨域调用了 不管是子页面调用父页面 还是父页面调用子页面。一切ok!

2、 是不同主域跨域;

 虽然google有几种方法关于不同主域上的跨域问题 有通过location.hash方法或者window.name方法或者html5及flash等等,但是我觉得下面iframe这种方法值得学习下,

如下图所示:域a.com的页面request.html(即http://a.com/demo/ajax/ajaxproxy/request.html)里面嵌套了一个iframe指向域b.com(http://b.com/demo/ajax/ajaxproxy/response.html)的response.html,而response.html里又嵌套了域a.com的proxy.html。

JS解决iframe之间通信和自适应高度的问题

思路:要实现a.com域下的request.html页面请求域b.com下的process.php,可以将请求参数通过url传给response.html,由response.html向process.php发起真正的ajax请求(response.html与process.php都属于域b.com),然后将返回的结果通过url传给proxy.html,最后由于proxy.html和request.html是在同个域下,所以可以在proxy.html利用window.top 将结果返回在request.html完成真正的跨域。

JS解决iframe之间通信和自适应高度的问题

ok, 先看看页面结构

a.com域下有:

     request.html

     proxy.html

b.com域下有:

    response.html

    process.php

先来看看request.html页面如下:

<!DOCTYPE HTML>
<html>
 <head>
 <title> New Document </title>
 </head>
 
 <body>
 <p id="result">这里将会填上响应的结果</p>
 <a id="sendBtn" href="javascript:void(0)">点击,发送跨域请求</a>
 <iframe id="serverIf" style="display:none"></iframe>
 
 <script>
 document.getElementById('sendBtn').onclick = function() {
  var url = 'http://b.com/demo/ajax/ajaxproxy/reponse.html',
  fn = 'GetPerson',  //这是定义在response.html的方法
  reqdata = '{"id" : 24}', //这是请求的参数
  callback = "CallBack"; //这是请求全过程完成后执行的回调函数,执行最后的动作
 
  CrossRequest(url, fn, reqdata, callback); //发送请求
 }
 
 function CrossRequest(url,fn,reqdata,callback) {
  var server = document.getElementById('serverIf');
  server.src = url + '?fn=' +encodeURIComponent(fn) + "&data=" +encodeURIComponent(reqdata) + "&callback="+encodeURIComponent(callback);
 }
 //回调函数
 function CallBack(data) {
  var str = "My name is " + data.name + ". I am a " + data.sex + ". I am " + data.age + " years old.";
  document.getElementById("result").innerHTML = str;
 }
 </script>
 </body>
</html>

这个页面其实就是要告诉response.html:我要让你执行你定义好的方法GetPerson,并且要用我给你的参数'{"id" : 24}'。response.html纯粹是负责将CallBack这个方法名传递给下一位仁兄proxy.html,而proxy.html拿到了CallBack这个方法名就可以执行了,因为proxy.html和request.html是同域的。

response.html代码如下:     

<!DOCTYPE HTML>
<html>
 <head>
 <title> New Document </title>
 </head>
 
 <body>
 <iframe id="proxy"></iframe>
 <script>
 // 通用方法 ajax请求
 function _request (reqdata,url,callback) {
  var xmlhttp;
  if(window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
  }else {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
  xmlhttp.onreadystatechange = function(){
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   var data = xmlhttp.responseText;
   callback(data);
  }
  }
  xmlhttp.open('POST',url);
  xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  xmlhttp.send(reqdata);
 }
 
 // 通用方法 获取url参数
 function _getQuery(key) {
  var query = location.href.split('?')[1],
  value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]);
  return value;
 }
 
 //向process.php发送ajax请求
 function GetPerson(reqdata,callback) {
  var url = 'http://b.com/demo/ajax/ajaxproxy/process.php';
  var fn = function(data) {
  var proxy = document.getElementById('proxy');
  proxy.src = "http://a.com/demo/ajax/ajaxproxy/Proxy.html?data=" + encodeURIComponent(data) + "&callback=" + encodeURIComponent(callback);
  };
  _request(reqdata, url, fn);
 }
 
 (function(){
  var fn = _getQuery('fn'),
  reqdata = _getQuery("data"),
  callback = _getQuery("callback");
  eval(fn + "('" + reqdata +"', '" + callback + "')");
 })();
 </script>
 </body>
</html>

      这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的ajax请求,然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。 

接下来看看php代码如下,其实就是想返回一个json数据:

<?php 
 $data = json_decode(file_get_contents("php://input"));
 header("Content-Type: application/json; charset=utf-8");
 echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');
?>

最后就是proxy.html代码:

<!DOCTYPE HTML>
<html>
 <head>
 <title> New Document </title>
 </head>
 
 <body>
 <script>
  function _getUrl(key) {//通用方法,获取URL参数
   var query = location.href.split("?")[1],
  value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]);
   return value;
  }
  (function() {
  var callback = _getUrl("callback"),
   data = _getUrl("data");
  eval("window.top." + decodeURIComponent(callback) + "(" + decodeURIComponent(data) + ")");
  })();
 </script>
 </body>
</html>

这里也是最后一步了,proxy终于拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据,利用window.top执行request.html里定义的回调函数。

三、iframe高度自适应的问题。

    iframe高度自适应分为2种,一种是同域下自适应  另外一种是跨域下自适应,下面我们来看看同域下iframe高度自适应的问题。

   1.同域下iframe高度自适应的问题:

        思路:获取被嵌套iframe元素,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。

假如我们demo有iframe1.html和iframe2.html

下面贴上iframe1.html代码如下:

<!DOCTYPE HTML>
<html>
 <head>
 <title> New Document </title>
 <style>
 *{margin:0;padding:0;}
 </style>
 </head>
 
 <body>
 <iframe src="http://a.com/demo/ajax/iframeheight/iframe2.html" style="width:100%;border:1px solid #333;" frameborder="0" id="iframe"></iframe>
 
 <script>
 window.onload = function() {
  var iframeid = document.getElementById('iframe');
  if(iframeid && !window.opera) {
  if(iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
   iframeid.height = iframeid.contentDocument.body.offsetHeight;
  }else if(iframeid.Document && iframeid.Document.body.scrollHeight){ 
   iframeid.height = iframeid.Document.body.scrollHeight;
  }
  }
 }
 </script>
 </body>
</html>

iframe2.html

<!DOCTYPE HTML>
<html>
 <head>
 <title> New Document </title>
 <style>
 *{margin:0;padding:0;}
 </style>
 </head>
 
 <body>
 <div style="height:500px;"></div>
 </body>
</html>

就可以动态设置iframe1页面的高度为iframe2的高度了。

 2. 跨域下iframe高度自适应的问题。

    首先我们知道iframe跨域我们是不能用上面js方式来控制了,所以我们只能用个中间键 我们可以在a.com域下iframe1.html页面嵌套一个b.com域下的iframe2.html页面,然后我在iframe2.html页面嵌套个和iframe1.html相同域的iframe3.html页面了,这样的话 iframe1.html和iframe3.html就可以无障碍的进行通信了,因为页面iframe2.html嵌套iframe3.html,所以iframe2.html可以改写iframe3.html的href值。

   iframe1中的内容:

      iframe1.html内容主要接受iframe3.html页面传过来的内容并且去完成相应的操作。iframe1.html代码如下:

<iframe src="http://b.com/demo/ajax/iframeheight/iframe2.html" style="width:400px;height:200px;" id="iframe"></iframe> 

<script>
 var ifr_el = document.getElementById("iframe");
 function getIfrData(data){
 ifr_el.style.height = data+"px";
 }
</script>

iframe2.html中的内容:

       iframe2.html内容是怎么把值传给iframe3.html页面,刚才说了是将值传递到iframe3.html页面的href中,所以只要修改iframe的src就可以,因为不用刷新C页面,所以可以用过hash的方式传递给iframe3.html页面.iframe2.html代码如下:

<!DOCTYPE HTML>
<html>
 <head>
 <title> New Document </title>
 <style>
 *{margin:0;padding:0;}
 </style>
 </head>
 
 <body>
 <iframe id="iframe" src="http://a.com/demo/ajax/iframeheight/iframe3.html" width="0" height="230px"></iframe>
 
 <script>
 var oldHeight = 0,
  ifr_el = document.getElementById("iframe");
  
 t && clearInterval(t);
 var t = setInterval(function(){
  var height = document.body.scrollHeight;
  if(oldHeight != height) {
  oldHeight = height;
  ifr_el.src += '#' +oldHeight; 
  }
 },200);
 </script>
 </body>
</html>

         可以看到 默认情况下 iframe1.html 页面我给iframe2.html的高度是200像素 但是在iframe2.html我给iframe3.html高度是230像素,那么正常情况下是有滚动条的,那么现在我是想在iframe2.html获取滚动条的高度,把高度传给通过iframe3.html的src里面去,然后在iframe3.html页面里获取这个高度值 传给iframe1.html(因为iframe1.html和iframe3.html是同域的),所以iframe1.html能取到这个高度值,再设置下本身的高度就是这个值就ok了。

       iframe3.html页面的唯一功能就是接收iframe2.html页面通过href传进来的值并且传递给iframe1.html页面,可到iframe2.html页面传来的值可以通过一个定时器不停去查看location.href是 否被改变,但是这样感觉效率很低,还有个方式就是在新的浏览器中通过onhashchange事件 (IE8+,Chrome5.0+,Firefox3.6+,Safari5.0+,Opera10.6+)来监听href的改变。

iframe3.html代码如下:

<script>
 var oldHeight = 0;
 
 t && clearInterval(t);
 var t = setInterval(function(){
 var height = location.href.split('#')[1];
 if(height && height != oldHeight) {
  oldHeight = height;
  if(window.parent.parent.getIfrData) {
  window.parent.parent.getIfrData(oldHeight);
  }
 }
 },200);
 </script>

这样就可以解决通过跨域实现iframe自适应高度的问题了。

四、总结

以上就是本文的全部内容了,希望对大家的学习工作能有所帮助。如果有疑问可以留言讨论。

Javascript 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
浅谈js中对象的使用
Aug 11 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 #Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 #Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 #Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 #Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 #Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 #Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 #Javascript
You might like
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php mail to 配置详解
2014/01/16 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Django框架安装方法图文详解
2019/11/04 Python
python 元组和列表的区别
2020/12/30 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
室内拓展活动方案
2014/02/13 职场文书
教师工作失职检讨书
2014/09/18 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
客房部经理岗位职责
2015/02/02 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Django drf请求模块源码解析
2021/06/08 Python
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python