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

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

WBOY

Lepaskan： 2016-05-16 15:36:55

asal

1976 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.