Rumah >hujung hadapan web >tutorial js >Kaedah dan langkah berjaga-jaga untuk memanggil JS dalam tetingkap kelas induk kanak-kanak dalam kemahiran iframe_javascript

Kaedah dan langkah berjaga-jaga untuk memanggil JS dalam tetingkap kelas induk kanak-kanak dalam kemahiran iframe_javascript

WBOYasal: 2016-05-16 15:42:591715semak imbas

1 Halaman saya menggunakan tetingkap pop timbul EasyUI dengan iframe dibenamkan di dalamnya.

Pertama: Apabila tetingkap induk membuka tetingkap anak, ia adalah subhalaman iframe yang menambah maklumat pengguna Selepas mengklik Simpan, tetingkap anak iframe memanggil kaedah closeAddWindow() tetingkap induk, membenarkan tetingkap induk ditutup. halaman yang baru ditambah;

Kedua: Tetingkap induk membuka sub-tetingkap iframe untuk menetapkan kebenaran pengguna Pertama, membuka sub-tetingkap ini akan memuatkan semua kebenaran sedia ada dalam jadual pangkalan data, dan kemudian sub-tetingkap perlu menyambung maklumat kebenaran yang dimuatkan ke dalam. html Tambah pada ID Untuk 481b26505f1e161e4c14f72858b14c10f16b1740fad44fb09bfe928bcc527e08, terdapat masalah di sini iaitu selepas tetingkap induk membuka tetingkap anak dan memuatkan semua kebenaran, adalah mustahil untuk menambahkan html pada jadual dengan id="tb". Sebab ini sangat Mudah, kerana selepas tetingkap induk memanggil tetingkap anak untuk memuatkan semua maklumat kebenaran, elemen jadual tidak dijumpai kerana halaman anak belum dimuatkan sepenuhnya juga diperkenalkan di sini Daftar acara onload untuk iframe, dan tunggu sehingga pemuatan selesai, kemudian panggil kaedah tambah.

Baiklah, itu sahaja, mari kita lihat lebih banyak contoh! ! ~~~~~~(*^__^*) Hee hee...

2. panggilan kaedah tetingkap anak iframe dan ibu bapa

2.1 Penggunaan tatabahasa

1. iframe terbenam tetingkap ibu bapa

Salin kod Kod adalah seperti berikut: b0b9bfbda2c5094da6679ec09efe3939065276f04003e4622c4fe6b64f465b88

2. Tetingkap induk memanggil kaedah tetingkap anak

Salin kod Kod adalah seperti berikut: myFrame.window.sonMethod();

3 Tetingkap anak memanggil kaedah tetingkap induk

Salin kod Kod adalah seperti berikut: parent.fatherMethod();

4. Kaedah penyelesaian pemuatan iframe yang serasi dengan penyemak imbas

2.2 Kod tatabahasa

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

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

3. Bila hendak menggunakan myFrame.onload atau myFrame.attachEvent

Rangka kerja bahagian hadapan easyui digunakan di sini

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

4. Mari kita ringkaskan beberapa perkara penting

Apabila memanggil kaedah tetingkap ibu bapa-anak, perhatikan susunan pemuatan untuk mendapatkan hasil yang diingini Jika anda menghadapi masalah, anda sering boleh menggunakan alter() untuk menguji atau memantau alatan pembangun penyemak imbas

Kandungan di atas ialah kaedah dan langkah berjaga-jaga untuk memanggil JS dalam tetingkap kelas sub-induk iframe dalam artikel ini.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js fade in dan fade out imej kesan karusel kemahiran perkongsian kod_javascriptArtikel seterusnya：js fade in dan fade out imej kesan karusel kemahiran perkongsian kod_javascript

Artikel berkaitan

Lihat lagi