iframe 获取父窗口调用方法跨域

最新推荐文章于 2024-03-16 14:45:01 发布

清秋め

最新推荐文章于 2024-03-16 14:45:01 发布

阅读量770

点赞数

分类专栏： js iframe 跨域文章标签： js

本文链接：https://blog.csdn.net/qq_42033668/article/details/114679511

版权

js 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

跨域

2 篇文章 0 订阅

订阅专栏

iframe

1 篇文章 0 订阅

订阅专栏

假设有一个 http://localhost:8080/项目下的 parent.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <script>
        function load() {
            window.addEventListener("message",function(event){
	            console.log(event);
	            hello();
        	});
        }
        function hello() {
             console.log("你好");
        }

    </script>

</head>

<body onload="load()">
	<iframe src="http://dev.xcall.cn:8090/child.html"></iframe>
</body>

</html>

http://dev.xcall.cn:8090/项目下的 child.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <script>
        function submitHandler() {
             window.parent.postMessage("closeAndRefresh",'http://localhost:8080/')

        });
        }

    </script>

</head>

<body>
 <button onclick="submitHandler()">提交申请</button>

</body>

</html>

关键代码

 window.addEventListener("message",function(event){
	            console.log(event);
        	});


  window.parent.postMessage("closeAndRefresh",'http://localhost:8080/')

获取子窗口 (反过来就好了)

 document.getElementsByName("layui-layer-iframe1")[0].contentWindow;
 或者 
let win= document.getElementById("layui-layer-iframe1").contentWindow;

win.parent.postMessage("closeAndRefresh",'http://dev.xcall.cn:8090/')

清秋め

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe 获取父窗口调用方法跨域

假设有一个 http://localhost:8080/项目下的 parent.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <script> function load() { window.addEventListener("message",function(event){ console
复制链接

扫一扫