Methoden für untergeordnete JavaScript-Fenster zum Aufrufen von übergeordneten Fenstervariablen und Funktionen_Javascript-Fähigkeiten-js-Tutorial-php.cn

Methoden für untergeordnete JavaScript-Fenster zum Aufrufen von übergeordneten Fenstervariablen und Funktionen_Javascript-Fähigkeiten

WBOY

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

Original

1976 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie ein untergeordnetes JavaScript-Fenster Variablen und Funktionen des übergeordneten Fensters aufruft. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Beispiel 1: Das untergeordnete Fenster ist ein neu geöffnetes Fenster

Übergeordnetes Fenster:

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

Nach dem Login kopieren

Unterfenster:

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

Nach dem Login kopieren

Solange Sie den Opener vor Variablen und Funktionen hinzufügen, können Sie auf die angegebenen Ressourcen zugreifen.

Aber wenn das übergeordnete Fenster geschlossen wird, wird bei Verwendung dieser Methode ein Fehler gemeldet: „Das aufgerufene Objekt hat die Verbindung zu seinem Client getrennt.“

Beispiel 2: Die untergeordnete Seite ist ein Iframe der übergeordneten Seite

Übergeordnete Seite:

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

Nach dem Login kopieren

Unterseite:

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

Nach dem Login kopieren

Kleine Entdeckung: Wenn die übergeordnete Seite aktualisiert wird, wird auch der darin enthaltene Iframe aktualisiert. Wenn der Iframe aktualisiert wird, wird die übergeordnete Seite nicht aktualisiert.

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.