同域下iframe父子页面的通信

最新推荐文章于 2022-11-26 20:51:55 发布

爬爬代码工

最新推荐文章于 2022-11-26 20:51:55 发布

阅读量116

点赞数

分类专栏： js html

本文链接：https://blog.csdn.net/u012296827/article/details/106006704

版权

js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

核心代码：

//调用子页面方法：
document.getElementById("content").contentWindow.childtest();
//调用父页面方法：
parent.window.sayInParent();

父页面parent.html

<html>
<head>
    <script type="text/javascript">
         function callChild() {//调用子页面js方法
            document.getElementById("content").contentWindow.childtest();
        }

	function sayInParent(){
            alert("sayInParent");
        }
    </script>
</head>
<body>
    <input type="button" value="调用子页面的方法"  onclick="callChild()"/> <br/>  
    <iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

子页面child.html

<html>
<head>
    <script language="javascript" type="text/javascript">
      function childtest() {
          alert("这是子页面的方法！");
      }

      function callParent() {//调用父页面js方法
    	  parent.window.sayInParent();
      }
      
    </script>
</head>
<body>
    <input type="button" value="调用父页面的方法"  onclick="callParent()"/> 
</body>
</html>

爬爬代码工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
同域下iframe父子页面的通信

核心代码：//调用子页面方法：document.getElementById("content").contentWindow.childtest();//调用父页面方法：parent.window.sayInParent();父页面parent.html<html><head> <script type="text/javascript"> function callChild() {//调用子页面js方法
复制链接

扫一扫