ifram子页面与父页面的方法相互调用

Posted lgnblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ifram子页面与父页面的方法相互调用相关的知识,希望对你有一定的参考价值。

parent.html

<!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 Page</title>
        <script language="javascript" type="text/javascript">
            function parenttest() 
                alert("这是父页面的方法!");
            
            function btnClick() 
                document.getElementById("childframe").contentWindow.childtest();
            
    </script>
</head>
<body>
   <div style="margin:auto;">
       <h1>This is the Parent Page.</h1>
       <input type="button" value="调用子页面的方法"  onclick="btnClick()"/> 
    </div>
    <div style="margin:auto;">
       <iframe style="width:300px; height:300px;" id="childframe" src="ChildPage.html"></iframe>
    </div>
</body>
</html>

son.html

<!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 Page</title>
    <script language="javascript" type="text/javascript">
      function childtest()
        alert("这是子页面的方法!");
      

      function btnClick()
        window.parent.parenttest();
      
  </script>
  </head>
  <body>
    <div style="margin:auto;">
      <h1>This is the Child Page.</h1>
      <input type="button" value="调用父页面的方法" onclick="btnClick()" />
    </div>
  </body>
</html>

以上是关于ifram子页面与父页面的方法相互调用的主要内容,如果未能解决你的问题,请参考以下文章

iframe父子页面相互调用方法,相互获取元素

iframe页面父页面与子页面之间相互进行数据传送及方法调用

iframe子页面与父页面元素的访问以及js变量的访问

iframe与父页面之间通讯跨域问题

iframe 父页面与子页面之间的方法的相互调用

iframe子页面与父页面元素的访问以及js变量的访问