Heim  >  Artikel  >  php教程  >  Über gegenseitige Aufrufe zwischen der übergeordneten Iframe-Seite und der untergeordneten Seite

Über gegenseitige Aufrufe zwischen der übergeordneten Iframe-Seite und der untergeordneten Seite

高洛峰
高洛峰Original
2016-12-06 09:46:291349Durchsuche

Das iframe-Element ist das Dokument innerhalb des Dokuments.

Fensterobjekt: Der Browser erstellt ein entsprechendes Fensterobjekt, wenn er ein HTML-Dokument öffnet. Wenn ein Dokument jedoch einen oder mehrere Frames definiert (d. h. ein oder mehrere Frame- oder Iframe-Tags enthält), erstellt der Browser ein Fensterobjekt für das Originaldokument und erstellt dann für jeden Iframe zusätzliche Fensterobjekte Unterfenster des Originalfensters.

contentWindow: bezieht sich auf den angegebenen Iframe oder das Fensterobjekt, in dem sich der Iframe befindet

Demo1

Übergeordnete Seite fu.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>父页面</title>
  </head>
  <body>
  <input type=button value="调用子页面中的函数childSay函数" onclick="callChild()">
  <iframe id="myFrame" src="zi.html"></iframe>
  <script type="text/javascript">
function parentSay() {
alert("我是父页面中的方法");
}
function callChild()
{
document.getElementById("myFrame").contentWindow.childSay();
}
  </script>
  </body>
</html>

Unterseite zi .html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>子页面</title>
  </head>
  <body>
  <input type=button value="调用父页面中的parentSay()函数" onclick="callParent()">
  <script type="text/javascript">
function childSay()
{
alert("我是子页面的say方法");
}
function callParent() {
parent.parentSay();
}
  </script>
  </body>
</html>

Demo2

übergeordnete Seite iframe1.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>父页面与子页面之间的调用</title>
  </head>
  <body>
  <iframe src="http://localhost/iframe/iframe3.html" id="iframe3"></iframe>
  <iframe src="http://localhost/iframe/iframe2.html" id="iframe2"></iframe>
  <div>我是父页面</div>
  <script type="text/javascript">
  var iframe2=document.getElementById(&#39;iframe2&#39;);
  iframe2.onload=function(){//父页面调用子页面中的方法
    iframe2.contentWindow.b();
  };
  function test2() {
    console.log("我是父页面中的方法,在子页面中调用的");
    return iframe2;
  }
  </script>
  </body>
</html>

untergeordnete Seite iframe2.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>子页面</title>
  </head>
  <body>
  <div id="test">aaa</div>
  <div>子页面</div>
  <script type="text/javascript">
  //子页面iframe2.html调用父页面iframe1.html的函数:
   parent.test2();
   function b(){
      console.log("我是子页面iframe2");
    }
    function c() {
      console.log("iframe3页面调用iframe2页面");
    }
  </script>
  </body>
</html>

Unterseite iframe3.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>iframe3</title>
  </head>
  <body>
  <script type="text/javascript">
  var iframe2=parent.test2();
  iframe2.contentWindow.c();//iframe3调用iframe2中的方法
  </script>
  </body>
</html>

Demo2 implementiert auch gegenseitige Aufrufe zwischen Unterseiten.

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