来自 计算机网络 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

iframe子页面与父页面在同域或不一致域下的js通讯

一、前言

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。

我页面用的是EasyUI的弹出窗口里面嵌入一个iframe。

一、同域下父子页面的通信

第一:父窗口打开子窗口是一个新增用户信息的iframe子页面,点击保存后,子窗口iframe则去调用父窗口的function closeAddWindow()方法,让父窗口去关闭新增页面;

父页面parent.html

第二:父窗口打开一个设置用户权限的iframe子窗口,首先打开这个子窗口会全部加载数据库表中所有的存在的权限,然后子窗口需要把加载的权限信息拼接html  Append到一个ID为<table id="tb"></table>上,这里有个问题就是父窗口打开子窗口加载所有权限后根本无法把html 追加到id="tb"的表格上,这个原因很简单,因为父窗口调用子窗口加载所有权限信息的后,没有找到表格元素,因为子页面还没有完全加载完成,这种情况处理在这里也介绍了,给iframe注册一个onload事件,等加载完成后再去调用追加的方法。

复制代码 代码如下:

好了,简单到这里,让我们瞧瞧更多的事例吧!!~~(*^__^*) 嘻嘻……

<html>
<head>
<script type="text/javascript">
function say(){
alert("parent.html");
}
function callChild(){
myFrame.window.say();
myFrame.window.document.getElementById("button").value="调用结束";
}
</script>
</head>
<body>
<input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

二、iframe子父窗口方法调用

子页面child.html

2.1语法使用

复制代码 代码如下:

1、父窗口嵌入iframe  

<html>
<head>
<script type="text/javascript">
function say(){
alert("child.html");
}
function callParent(){
parent.say();
parent.window.document.getElementById("button").value="调用结束";
}
</script>
</head>
<body>
<input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
</body>
</html>

复制代码 代码如下:

方法调用

<iframe id='myFrame' name="myFrame" src="FChild.html" width='100%' height='100%' frameborder='0'></iframe>

父页面调用子页面方法:FrameName.window.childMethod();

2、父窗口调用子窗口方法  

子页面调用父页面方法:parent.window.parentMethod();
DOM元素访问

复制代码 代码如下:

获取到页面的window.document对象后,即可访问DOM元素
注意事项

myFrame.window.sonMethod();

要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:

3、子窗口调用父窗口方法   

  1. iframe上用onload事件

  2. 用document.readyState=="complete"来判断

复制代码 代码如下:

二、跨域父子页面通信方法

 parent.fatherMethod();

如果iframe所链接的是外部页面,因为安全机制就不能使用同域名下的通信方式了。
父页面向子页面传递数据

4、兼容浏览器的iframe 加载完成方法

实现的技巧是利用location对象的hash值,通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串,然后在子页面中通过某种方式能即时的获取到这儿的data就可以了,例如:

 if (myFrame.attachEvent) {
      myFrame.attachEvent("onload", function () {
        alert("兼容IE加载的加载方法");
      });
    } else {
      myFrame.onload = function () {
        alert("兼容其他浏览器加载方法");
      };
    }

1. 在子页面中通过setInterval方法设置定时器,监听location.href的变化即可获得上面的data信息

2.2语法代码

  1. 然后子页面根据这个data信息进行相应的逻辑处理

Father.html

子页面向父页面传递数据

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
</head>
<body>
  <div>我是父窗口内容</div>
  <div><input type="button" id="btnFather" value="调用子窗口方法" /></div>
  <br />
  <br />
  <br />
  <iframe id='myFrame' name="myFrame" src="FChild.html" width='100%' height='100%' frameborder='0'></iframe>
  <script type="text/javascript">
    document.getElementById("btnFather").onclick=function () {
      myFrame.window.sonMethod();
    }
    function fatherMethod() {
      alert("父窗口方法!");
    }
    if (myFrame.attachEvent) {
      myFrame.attachEvent("onload", function () {
        alert("兼容IE加载的加载方法");
      });
    } else {
      myFrame.onload = function () {
        alert("兼容其他浏览器加载方法");
      };
    }
  </script>
</body>
</html>

实现技巧就是利用一个代理iframe,它嵌入到子页面中,并且和父页面必须保持是同域,然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe,然后由于代理的iframe和主页面是同域的,所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

FChild.html

您可能感兴趣的文章:

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
  • jquery、js调用iframe父窗口与子窗口元素的方法整理
  • iframe子父页面调用js函数示例
  • js与jQuery 获取父窗、子窗的iframe
  • JS中Iframe之间传值及子页面与父页面应用
  • 使用jquery/js获取iframe父子级、同级获取元素的方法
  • iframe中子父类窗口调用JS的方法及注意事项
  • 嵌入式iframe子页面与父页面js通信的方法
  • 利用JS对iframe父子(内外)页面进行操作的方法教程
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <div style="border:1px solid red;"> 我是子窗体内容</div> 
   <div > <input type="button" id="btnSon" value="调用父窗口方法" /></div> 
   <script type="text/javascript">
     document.getElementById("btnSon").onclick = function () {
       parent.fatherMethod();
     }
     function sonMethod() {
       alert("子窗口方法!");
     }
  </script>
</body>
</html>

三、什么情况下使用到 myFrame.onload 或者 myFrame.attachEvent

这里使用的是easyui框架前端框架 

<div id="divRoleUsers" title="设置用户角色" class="easyui-window" closed="true" collapsible="false" minimizable="false" maximizable="false" style="width: 140px; height: 250px; padding: 5px;">
   </div>
 <div > <input type="button" id="btn" value="设置用户角色" /></div> 
 <script type="text/javascript">
 $("#btn").click(function () {
showSetUserRoleWindow();
});
    //设置用户角色
    function showSetUserRoleWindow() {
      var getSelections = $("#tt").datagrid("getSelections");
      if (getSelections.length > 1 || getSelections.length == 0) {
        $.messager.alert("错误提示", "请选中一行数据!", "error");
        return false;
      }
      var data = getSelections[0]; //获取选中的一行所有json的数据
      //if ($("#divRoleUsers #iframe").length != 0) {
      //  $("#divRoleUsers #iframe").remove();
      //}
      //  $('#divRoleUsers').append("<iframe id='iframe' name='iframe' src='RoleUsers_Update.aspx?UserID=" + data.UserID + "' width='100%' height='100%' frameborder='0'></iframe>");
      //错误做法!:上面src='RoleUsers_Update.aspx?UserID=" + data.UserID + "'   这里通过拼接参数iframe的src,
      //然后通过子窗口 parent.document.getElementById("iframe").getAttribute("src");//获取父窗体iframe的src 发现根据获取不到UserID的值,为null,也是因为加载顺序先后的问题,导致我要用给iframe注册onload事件后才能获取到我需要的结果
      //if (myframe.attachEvent) {
      //  myframe.attachEvent("onload", function () {
      //    alert("Local iframe is now loaded.");
      //    myframe.window.loadAllRole();
      //  });
      //} else {
      //  myframe.onload = function () {
      //    alert("Local iframe is now loaded.");
      //    myframe.window.loadAllRole();
      //  };
      //}
      if ($("#divRoleUsers #myframe").length != 0) {   //这一步是必须的!!!,因为不加这一句下面onload绑定事件只执行一次,我需要每次加载完iframe都调用一次子窗口的方法!
        $("#divRoleUsers #myframe").remove();
      }
      $('#divRoleUsers').append("<iframe id='myframe' name='myframe' src='RoleUsers_Update.aspx' width='100%' height='100%' frameborder='0'></iframe>");
      if (myframe.attachEvent) {
        myframe.attachEvent("onload", function () {
          myframe.window.loadAllRole(); 
          myframe.window.loadUserRole(data.UserID);
        });
      } else {
        myframe.onload = function () {
          myframe.window.loadAllRole();     //调用子窗口iframe里面的方法加载所有的角色checkbox
          myframe.window.loadUserRole(data.UserID);   //接着传递用户ID过去给子窗口的方法,给用户拥有的角色设置checkbox选中
        };
      }
      $('#divRoleUsers').window('open');
    }
  </script>

 四、总结几个关键点吧

父子窗口方法的调用,注意加载的先后顺序才能获取到想要的结果,遇到问题常用alter()测试或者浏览器的开发者工具监控

以上内容就是本文中介绍iframe中子父类窗口调用JS的方法及注意事项,希望大家喜欢。

您可能感兴趣的文章:

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
  • jquery、js调用iframe父窗口与子窗口元素的方法整理
  • iframe子父页面调用js函数示例
  • js与jQuery 获取父窗、子窗的iframe
  • JS中Iframe之间传值及子页面与父页面应用
  • iframe子页面与父页面在同域或不同域下的js通信
  • 使用jquery/js获取iframe父子级、同级获取元素的方法
  • 嵌入式iframe子页面与父页面js通信的方法
  • 利用JS对iframe父子(内外)页面进行操作的方法教程

本文由六合联盟网发布于计算机网络,转载请注明出处:iframe子页面与父页面在同域或不一致域下的js通讯

关键词: