Méthodes permettant aux fenêtres enfants JavaScript d'appeler les variables de la fenêtre parent et les compétences function

Méthodes permettant aux fenêtres enfants JavaScript d'appeler les variables de la fenêtre parent et les compétences function_javascript

WBOY

Libérer： 2016-05-16 15:36:55

original

1976 Les gens l'ont consulté

L'exemple de cet article décrit comment une fenêtre enfant JavaScript appelle les variables et fonctions de la fenêtre parent. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Exemple 1 : La fenêtre enfant est une fenêtre nouvellement ouverte

Fenêtre parent :

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

Copier après la connexion

Sous-fenêtre :

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

Copier après la connexion

Tant que vous ajoutez un ouvreur devant les variables et les fonctions, vous pouvez accéder aux ressources spécifiées.

Mais lorsque la fenêtre parent est fermée, une erreur sera signalée lors de l'utilisation de cette méthode : "L'objet appelé s'est déconnecté de son client."

Exemple 2 : La page enfant est une iframe de la page parent

Page parent :

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

Copier après la connexion

Sous-page :

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

Copier après la connexion

Petite découverte : lorsque la page parent est actualisée, l'iframe qu'elle contient sera également actualisée ; lorsque l'iframe est actualisée, la page parent ne sera pas actualisée ;

J'espère que cet article sera utile à la programmation JavaScript de chacun.