Methoden und Vorsichtsmaßnahmen zum Aufrufen von JS im Fenster der untergeordneten übergeordneten Klasse in iframe_javascript-Kenntnissen-js-Tutorial-php.cn

Methoden und Vorsichtsmaßnahmen zum Aufrufen von JS im Fenster der untergeordneten übergeordneten Klasse in iframe_javascript-Kenntnissen

WBOY

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

Original

1706 Leute haben es durchsucht

1. Vorwort

Meine Seite verwendet das Popup-Fenster von EasyUI mit einem darin eingebetteten Iframe.

Erstens: Wenn das übergeordnete Fenster das untergeordnete Fenster öffnet, handelt es sich um eine Iframe-Unterseite, die Benutzerinformationen hinzufügt. Nach dem Klicken auf „Speichern“ ruft der Iframe des untergeordneten Fensters die Funktion „closeAddWindow()“ des übergeordneten Fensters auf, sodass das übergeordnete Fenster geschlossen werden kann die neu hinzugefügte Seite;

Zweitens: Das übergeordnete Fenster öffnet ein Iframe-Unterfenster, um Benutzerberechtigungen festzulegen. Durch das Öffnen dieses Unterfensters werden zunächst alle vorhandenen Berechtigungen in der Datenbanktabelle geladen, und dann muss das Unterfenster die geladenen Berechtigungsinformationen zusammenfügen HTML an eine ID anhängen Bei

besteht hier das Problem, dass es nicht möglich ist, HTML an die Tabelle anzuhängen, nachdem das übergeordnete Fenster das untergeordnete Fenster geöffnet und alle Berechtigungen geladen hat mit id="tb". Dieser Grund ist sehr einfach, denn nachdem das übergeordnete Fenster das untergeordnete Fenster aufgerufen hat, um alle Berechtigungsinformationen zu laden, wird das Tabellenelement nicht gefunden, da die untergeordnete Seite nicht vollständig geladen wurde Hier wird auch ein Onload-Ereignis für den Iframe registriert und gewartet, bis der Ladevorgang abgeschlossen ist. Rufen Sie dann die Append-Methode auf.

Okay, das war's, schauen wir uns weitere Beispiele an! ! ~~~~~~(*^__^*) Hee hee...

2. Aufrufe der untergeordneten und übergeordneten Iframe-Fenstermethode

2.1 Verwendung der Grammatik

1. Eingebetteter Iframe im übergeordneten Fenster

Code kopieren Der Code lautet wie folgt:

2. Das übergeordnete Fenster ruft die Methode des untergeordneten Fensters auf

Code kopieren Der Code lautet wie folgt:

myFrame.window.sonMethod();

3. Das untergeordnete Fenster ruft die Methode des übergeordneten Fensters auf

Code kopieren Der Code lautet wie folgt:

parent.fatherMethod();

4. Browserkompatible Iframe-Ladeabschlussmethode

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

Nach dem Login kopieren

2.2 Grammatikcode

Vater.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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

3. Wann myFrame.onload oder myFrame.attachEvent verwendet werden sollte

Hier wird das Easyui-Framework-Frontend-Framework verwendet

<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>

Nach dem Login kopieren

4. Fassen wir einige wichtige Punkte zusammen

Achten Sie beim Aufrufen der Eltern-Kind-Fenstermethode auf die Ladereihenfolge, um die gewünschten Ergebnisse zu erzielen. Wenn Sie auf Probleme stoßen, können Sie häufig alter() verwenden, um die Entwicklertools des Browsers zu testen oder zu überwachen

Der obige Inhalt ist die Methode und die Vorsichtsmaßnahmen zum Aufrufen von JS im untergeordneten Klassenfenster von iframe in diesem Artikel. Ich hoffe, dass es Ihnen gefällt.