iframe中子父类窗口调用JS的方法及注意事项

前端技术 2023/09/05 JavaScript

一、前言

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

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

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

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

二、iframe子父窗口方法调用

2.1语法使用

1、父窗口嵌入iframe  

复制代码 代码如下:

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

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

复制代码 代码如下:

myFrame.window.sonMethod();

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

复制代码 代码如下:

 parent.fatherMethod();

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

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

2.2语法代码

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>

FChild.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 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的方法及注意事项，希望大家喜欢。

本文地址：https://www.stayed.cn/item/12689

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案