Methods and precautions for calling JS in the child parent class window in iframe

Methods and precautions for calling JS in the child parent class window in iframe_javascript skills

WBOY

Release： 2016-05-16 15:42:59

Original

1698 people have browsed it

1. Foreword

My page uses EasyUI’s pop-up window with an iframe embedded in it.

First: When the parent window opens the child window, it is an iframe subpage that adds user information. After clicking Save, the child window iframe calls the function closeAddWindow() method of the parent window, allowing the parent window to close the newly added page;

Second: The parent window opens an iframe sub-window to set user permissions. First, opening this sub-window will load all existing permissions in the database table, and then the sub-window needs to splice the loaded permission information into html Append to an ID For

, there is a problem here that after the parent window opens the child window and loads all permissions, it is impossible to append html to the table with id="tb". This reason is very Simple, because after the parent window calls the child window to load all the permission information, the table element is not found because the child page has not been completely loaded. The handling of this situation is also introduced here. Register an onload event for the iframe, and wait until the loading is completed. Then call the append method.

Okay, that’s it, let’s take a look at more examples! ! ~~~~~~(*^__^*) Hee hee...

2. iframe child and parent window method calls

2.1 Grammar usage

1. Parent window embedded iframe

Copy code The code is as follows:

2. The parent window calls the child window method

Copy code The code is as follows:

myFrame.window.sonMethod();

3. The child window calls the parent window method

Copy code The code is as follows:

parent.fatherMethod();

4. Browser-compatible iframe loading completion method

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

Copy after login

2.2 Grammar code

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>

Copy after login

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>

Copy after login

3. When to use myFrame.onload or myFrame.attachEvent

The easyui framework front-end framework is used here

<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&#63;UserID=" + data.UserID + "' width='100%' height='100%' frameborder='0'></iframe>");
      //错误做法！：上面src='RoleUsers_Update.aspx&#63;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>

Copy after login

4. Let’s summarize a few key points

When calling the parent-child window method, pay attention to the order of loading to get the desired results. If you encounter problems, you can often use alter() to test or monitor the browser's developer tools

The above content is the method and precautions for calling JS in the sub-parent class window of iframe in this article. I hope you like it.