利用postmessage间接实现iframe跨域调用父页面js函数

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.8k累计阅读 1.9k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄14年

关注

VIP免费原创最新推荐文章于 2025-05-08 10:52:30 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

父页面html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            //添加监听事件。
            if (typeof window.addEventListener != "undefined")
                window.addEventListener("message", func, false);
            else if (typeof window.attachEvent != 'undefined')//兼容不支持addEventLinstener的IE。
                window.attachEvent("onmessage", func);
        }
        //被调用的函数。
        function invocationTarget(msg) {
            if (msg)
                alert(msg);
            else
                alert("~~~");
        }
        //监听事件回调函数。
        function func(e) {
            if (e.data.action == true)
                invocationTarget(e.data.value);

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#iframe 跨域调用js函数 post

获取iframe内部的DOM元素方式（跨域与不跨域）这里使用contentDocument属性来获取iframe的document对象。由于contentDocument在某些浏览器中可能不被支持，所以使用||操作符来兼容，当contentDocument不可用时，使用contentWindow.document来获取阅读详情

相关推荐

iframe页面跨域父子传参通信

基本概念： window.self: 当前窗口自身的引用 window.parent: 上一级父窗口的引用 window.top: 最顶层窗口的引用当页面中不存在 iframe 嵌套时，则三者均是当前窗口自身的引用。同域iframe相互调用：子页面调用父页面方法：window.parent.fatherFn(); 父页面调用子页面方法： window.sonFrameName.sonFn(); (sonFrameName是iframe的name值) 非跨域父调子 //父页面 <button c

FantasyWeirdo的博客 2588

【JS】postMessage 用法（可以给iframe传值）

跨文档消息，有时候也简称为`XDM(cross-document messaging)`，是一种在不同执行上下文（如不同源的页面）间传递信息的能力。例如：`www.wrox.com`上的页面想要与包含在内嵌窗格中的`p2p.wrox.com`上面的页面通信 `XMD`的核心就是`postMessage()`方法，将`message`传递给指定窗口

qq_45677671的博客 1万+

嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip

demo地址：http://www.tkcb.cc/menu/blog/html/html_0001/index.html 练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的技术分享，还有我们乐队推荐的游戏、软件、电影、作品、超赞链接推荐等等。最后，我会在CSDN陆续分享我的大量的（至少几百个）技术练习、经验等，希望大家多多交流，相互学习。

页面嵌套iframe怎么调用父页面的方法，子页面回调父页面函数方法

页面嵌套iframe怎么调用父页面的方法，子页面回调父页面函数方法, iframe子父页面间js的相互调用

橙-极纪元-JJYCheng 1万+

前端父子页面间调用 iframe跨域

父页面调子页面 window.onload = function () { 1、 document.getElementById("子页面元素ID").contentWindow.子页面方法名; 2、 document.getElementsByTagName("子页面元素标签名")[i].contentWindow.子页面方法名; 3、 document.getEle...

Zhang_h_的博客 1088

iframe父子互调，PostMessage

iframe里的js操作父级窗口的dom iframe里的js要操作父级窗口的dom，必须搞懂几个对象： parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）， top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）， self是当前窗口（等价window）， opener是用open方法打开当前窗口的那个窗口；这样iframe...

hmily43的博客 1105

iframe父子页面跨域调用

子页面传递参数,父页面接收子页面传输 window.parent.postMessage(“参数”,"");(可以是号,也可以是父页面的链接"http://127.0.0.1:8888/aaaa/bbb.html") 父页面接收 window.addEventListener(‘message’, function (e) { console.log(e.data) //e.data为传递过来的数据 console.log(e.origin) //e.origin为调用 postMessage 时消息

CYY941027的博客 583

【JS】postMessage实现iframe跨域通信

owo_ovo的博客 2147

VUE中iframe结合window.postMessage实现跨域通信

什么是iframe？ iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。什么是postMessage？ window.postMessage()方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数Document.domain设置为相同的值...

Oralinge 1万+

vue页面内嵌iframe使用postMessage进行跨域通信

跨域关于跨域的详细资料：跨域，这里只需要明确什么情况下跨域了（等同于两个url什么情况下是非同源关系）。协议、域名、端口三者有其一不同，就算是跨域，就算是非同源本地环境模拟借助phpstudy创建两个非同源网站，分别为www.a.com以及www.b.com。其中www.b.com的创建过程如下。以上创建出来的www.b.com网页就是一个vue页面，访问如下：同理创建出www.a.com页面，访问页面如下： vue中使用iframe、postMessage跨域通信获取ifra

foreverzwl 2975

与iframe跨域通信和不跨域通信

不跨域通信主页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <iframe name="myIframe" id="iframe" clas...

Army-海军的博客 1万+

iframe跨域通信(postMessage)

iframe跨域通信(postMessage) 前言 ❝ 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域 ❞ 需求背景在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行...

包磊磊的博客 1704

layer/iframe跨域问题postmessage的方式解决

首先跨域这个问题应该是一直以来大家比较困惑的事情，其实简单来说就是存在一堵墙影响了两个人的访问关系，也就是跨不过去的地域。那么问题来了，为啥会遇到这样的问题，首先当不是本地起的服务的时候，你要是想通过load或者layer的方式去加载本地的文件的时候就会出现 ...

赏樱看雪撸代码 2794

Angular2+ iframe跨域调用父页面js

业务场景：列表页面添加一个导入功能,该导入功能由第三方页面提供，导入完成后需要通知主列表刷新数据。先来看看iframe跨域调用父页面的实现逻辑(以postMessage方式为例) (postMessage介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage) 1.父页面html <!D...

weixin_30418341的博客 538

iframe和父页面相互传值,并兼容跨域问题.(项目实测成功) from accessing a cross-origin frame

项目背景: 部署本地服务器项目,后台管理系统内需要用iframe嵌入另一个功能项目,需要能够互相传值进行操作问题: 翻译之后是跨域了,因为浏览器的同源策略问题解决方法: 1:父页面向子iframe传值 (在父页面的js里获取到iframe,然后向iframe传值,然后这么写就行了,第一个参数是需要传的...

往事随风的博客 8万+

记录 iframe 跨域通信及安全配置

然而，随着跨域问题的日益严峻，如何确保在安全的前提下实现不同源之间的通信和资源加载，成为了开发者需要解决的关键问题。中，造成点击劫持（Clickjacking）等安全问题，你可以使用以下的头部配置来增强安全性。：由于浏览器的同源策略，父页面和 iframe 之间默认不能互相访问对方的资源。提供了一个安全的方式，让不同域的 iframe 和父页面之间能够安全地通信。与传统的 DOM 操作不同，，不同域的 iframe 默认不能访问父页面的资源，反之亦然。中，第二个参数是目标源，确保只允许来自指定源的消息。

qq_36291550的博客 2112

iframe跨域

iframe是什么东西？ IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。页面嵌套iframe比较常见。使用iframe跨域要满足一个基本条件，父页面和子页面都是自己可以控制的，如果随便把iframe指向一个其他网站，想通过跨域手段操作它基本上是不可能的。 document.domai...