JS篇(022)-iframe 跨域通信和不跨域通信

最新推荐文章于 2022-10-19 15:01:08 发布

手掌日月摘星辰

最新推荐文章于 2022-10-19 15:01:08 发布

阅读量399

点赞数

分类专栏：前端面试秘籍文章标签： javascript 前端 js

原文链接：https://blog.csdn.net/weixin_41229588/article/details/93719894

版权

前端面试秘籍专栏收录该内容

157 篇文章 10 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了JavaScript中iframe的不跨域通信和跨域通信方法。在不跨域通信中，展示了如何在主页面调用子页面的方法，以及子页面如何调用主页面的方法。对于跨域通信，重点讲解了使用postMessage的官方用法，包括子页面发送消息和父页面接收消息的代码示例。

摘要由CSDN通过智能技术生成

答案：

不跨域通信

主页面

<!DOCTYPE html>
<html>

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

<body>
    <iframe name="myIframe" id="iframe" class="" src="flexible.html" width="500px" height="500px">
    </iframe>
</body>
<script type="text/javascript" charset="utf-8">
    function fullscreen() {
        alert(1111);
    }
</script>

</html>

子页面 flexible. html

<!DOCTYPE html>
<html>

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

<body>
    我是子页面
</body>
<script type="text/javascript" charset="utf-8">
    // window.parent.fullScreens()
    function showalert() {
        alert(222);
    }
</script>

</html>

1、主页面要是想要调取子页面的 showalert 方法

myIframe.window.showalert();

2、子页面要掉主页面的 fullscreen 方法

window.parent.fullScreens();

3、js 在 iframe 子页面获取父页面元素:

window.parent.document.getElementById("元素id");

4、js 在父页面获取 iframe 子页面元素代码如下:

window.frames["iframe_ID"].document.getElementById("元素id");

跨域通信

使用postMessage(官方用法）

子页面

window.parent.postMessage("hello", "http://127.0.0.1:8089");

父页面接收

window.addEventListener("message", function(event) {
    alert(123);
});

解析：

参与互动

手掌日月摘星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录