cari

Rumah >hujung hadapan web >tutorial js >Kaedah untuk tetingkap anak JavaScript untuk memanggil pembolehubah tetingkap induk dan kemahiran functions_javascript

Kaedah untuk tetingkap anak JavaScript untuk memanggil pembolehubah tetingkap induk dan kemahiran functions_javascript

WBOY
WBOYasal
2016-05-16 15:36:551998semak imbas

Contoh dalam artikel ini menerangkan cara tetingkap anak JavaScript memanggil pembolehubah dan fungsi tetingkap induk. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Contoh 1: Tetingkap kanak-kanak ialah tetingkap yang baru dibuka

Tetingkap ibu bapa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
  <title>parent</title>
  <script type="text/javascript">
    var parentPara='parent';
    function parentFunction() {
      alert(parentPara);
    }
  </script>
</head>
<body>
  <button onclick="parentFunction()">显示变量值</button>
  <button onclick="window.open('child.html')">打开新窗口</button>
</body>
</html>

Subtingkap:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
  <title>child</title>
  <script type="text/javascript">
    function modify() {
      opener.parentPara='child';
    }
  </script>
</head>
<body>
  <button onclick="opener.parentFunction()">调用父页面的方法</button>
  <button onclick="modify()">更改父页面中变量的值</button> 
</body>
</html>

Selagi anda menambah pembuka di hadapan pembolehubah dan fungsi, anda boleh mengakses sumber yang ditentukan.

Tetapi apabila tetingkap induk ditutup, ralat akan dilaporkan apabila menggunakan kaedah ini: "Objek yang dipanggil telah terputus sambungan daripada kliennya."

Contoh 2: Halaman anak ialah iframe halaman induk

Halaman induk: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
  <title>parent</title>
  <script type="text/javascript">
    function fill() {
      //alert(frame1.window.childPara);  //显示frame1内的变量值
      var str=document.getElementById('txt1').value; //获得文本框内输入的值
      frame1.window.div1.innerHTML=str; //将值填入子页面的一个div中
    }
  </script>
</head>
<body>
  <div style="background-color:yellow;width:300px;height:300px;">
    父页面
    <iframe id="frame1" src="child.html" frameborder="0" scrolling="no" width="120px" height="120px"></iframe>
    <br/><br/><br/><br/>
    <input id="txt1" type="text"/>
    <button onclick="fill()">将文本框内值填充入子界面</button>
  </div>
</body>
</html>

Sub halaman: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
  <title>child</title>
  <script type="text/javascript">
    function fun() {
      parent.fill();
    }
  </script>
</head>
<body>
  <div style="background-color:lightblue;width:100px;height:100px;">
    <b>子页面</b><br/>
    <a href="#" onclick="fun()">同父页面按钮</a>
    <div id="div1" style="color:red;">
    </div>
  </div>
</body>
</html>

Penemuan kecil: Apabila halaman induk dimuat semula, iframe di dalamnya juga akan dimuat semula; apabila iframe dimuat semula, halaman induk tidak akan dimuat semula.

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

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：Pengenalan ringkas kepada kemahiran pengaturcaraan_javascript berfungsi JavascriptArtikel seterusnya：Pengenalan ringkas kepada kemahiran pengaturcaraan_javascript berfungsi Javascript

Artikel berkaitan

Lihat lagi