suchen

Heim >Web-Frontend >js-Tutorial >Methoden für untergeordnete JavaScript-Fenster zum Aufrufen von übergeordneten Fenstervariablen und Funktionen_Javascript-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:36:551974Durchsuche

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>

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>

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>

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>

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Einführung in die funktionale Javascript-Programmierung_Javascript-FähigkeitenNächster Artikel：Eine kurze Einführung in die funktionale Javascript-Programmierung_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen