首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法通过postMessage()由父级调用子iframe中的函数-跨区域

问题描述:

无法通过postMessage()由父级调用子iframe中的函数-跨区域

回答:

在跨域的情况下,父级页面无法直接调用子iframe中的函数。这是由于浏览器的同源策略所限制的安全机制。同源策略要求网页只能与同一域名、协议和端口的网页进行交互。

解决这个问题的方法是使用postMessage()方法进行跨域通信。postMessage()是HTML5中提供的一种跨文档通信的方法,可以安全地实现不同窗口或iframe之间的消息传递。

具体步骤如下:

  1. 在子iframe中,通过window.addEventListener()方法监听message事件,接收来自父级页面的消息。
  2. 在父级页面中,通过子iframe的contentWindow属性获取子iframe的window对象,并使用postMessage()方法向子iframe发送消息。
  3. 在子iframe中,通过event.data获取到父级页面发送的消息,并进行相应的处理。

需要注意的是,为了确保安全性,需要在消息的接收端进行消息来源的验证,以防止恶意代码的注入。

推荐的腾讯云相关产品:

腾讯云提供了一系列的云计算产品,包括云服务器、云数据库、云存储等。其中,与跨域通信相关的产品是腾讯云的消息队列CMQ(Cloud Message Queue)。CMQ是一种高可靠、高可用的消息队列服务,可以实现不同应用之间的异步通信和解耦。

腾讯云CMQ产品介绍链接地址:https://cloud.tencent.com/product/cmq

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 域详解 【原创】

    通过修改document.domain来域 4.1 在页面 http://www.example.com/a.html 设置document.domain 4.2 在页面 http:/...Padding)填充式JSON是资料格式 JSON 一种“使用模式”,是被包含在函数调用JSON,例如:callback({"name","trigkit4"}); 3.2 实现 JSONP两部分组成...:回调函数和数据 回调函数是当响应到来时页面调用函数,数据是传入回调函数JSON数据 js中直接用XMLHttpRequest请求不同域数据是不允许,但在页面上引入不同域js脚本文件是允许...通过修改document.domain来域 浏览器同源策略限制之一是不能通过ajax方法去请求不同源文档。第二个限制是浏览器不同域框架之间不能进行js交互操作。...框架不同域,所以无法通过在页面书写js代码来获取iframe数据: function test(){ var

    1.3K50

    同源策略和域解决方法

    无法读取 DOM无法获得 Ajax请求无效(请求发送后,浏览器不会进行响应) 第二部分:域解决方法 1.设置document.domain来域:(适用于cookie、iframe) 比如http:...如:Set-Cookie:key=value;domain=.test.com;path=/ iframe:也可以通过上述document.cookie设置,从而共享cookie、iframe拿到窗口...改变片段识别符,页面不会重新刷新 窗口将信息,写入窗口片段识别符;窗口通过监听hashchange事件得到通知 5.window.postMessage:HTML5为了解决域问题,引进全新API...:文档通信API(cross-document messaging) 窗口:http://a.com,窗口:http://b.com;显然两者不同源,但是通过postMessage两者可以实现域通信...(不过只支持get请求) 基本思想:网页通过添加一个元素,向服务器发送JSON数据,这种方法是不受同源策略限制;服务器收到请求后,将数据放入指定回调函数返回。 ?

    1.9K70

    域详解

    两部分组成:回调函数和数据 回调函数是当响应到来时页面调用函数,数据是传入回调函数JSON数据 js中直接用XMLHttpRequest请求不同域数据是不允许,但在页面上引入不同域...$.getJSON方法会自动判断是否域,不域的话,就调用普通ajax方法;域的话,则会以异步加载js文件形式来调用jsonp回调函数。...通过修改document.domain来域 浏览器同源策略限制之一是不能通过ajax方法去请求不同源文档。第二个限制是浏览器不同域框架之间不能进行js交互操作。...框架不同域,所以无法通过在页面书写js代码来获取iframe数据: function test(){ var...但document.domain设置是有限制,只能把document.domain设置成自身或更高一域,且主域必须相同。

    1.3K70

    vivo 悟空活动台 - 微组件状态管理(下)

    watch 方法监听数据变化,这样属性面板数据变化通过postMessage 传递给编辑器iframe环境。...假如代码如下,窗口暴露store对象给iframe访问,在窗口中获取数据,能保持数据响应式嘛?...因为 iframe 关系窗口Dep.target获取值为null,导致dep对象收集不到iframewatcher,阻断了响应式,关键代码如下图: 8、守正出奇 我们能不能将中断父子窗口依赖收集...神器Vue.observable来帮忙 通过 iframe 中使用 Vue.observable 添加对 store state包装,可以实现在 iframe 保留一份响应式 Dep 收集...8.1 抽象parent-store-mixin 通过 parent-store-mixin 将窗口store挂载在 iframe窗口内vue对象$pstore属性上,方便 在vue组件内获取窗口

    1.7K40

    vivo 商品可视化微前端实践

    图中左侧可视化区域是一个标准 h5 页面,可以把它看成一个页面,它与外层页面在 ui 上是完全隔离,同时在数据上又是共享。 下面我将会对可视化技术原理做完整阐述,请大家继续往下看。...看到这,小伙伴可能会有以下疑问: iframe窗口数据通信是通过 postMessage 完成,这里为什么不使用 postMessage 呢?...这是因为 vue 单例机制,窗口(商品管理页)窗口(商品管理页) new Vue 渲染, 因此在窗口中使用 use 、 filter 、 mixin 、 全局指令 、 全局组件等, 会覆盖窗口...而我们通过 uni-render ,让窗口和 iframe 窗口数据通信不再需要 postMessage ,同时只使用 vue 生态 vuex 做数据通信。...原因:iframe 预览页面为商品台域名,而应用接入主应用后为主应用域名,从而导致域。

    1.1K50

    什么是域?如何解决域问题?

    ,只能通过后台来解决  2、localhost和127.0.0.1虽然都指向本机,但也属于域限制 1、无法读取非同源网页 Cookie、LocalStorage 和 IndexedDB... 1、JSON返回是一串数据、JSONP返回是脚本代码(包含一个函数调用)  2、JSONP 只支持get请求、不支持post请求  (类似往页面添加一个script标签,通过src属性去触发对指定地址请求...;   document.domain设置是有限制,我们只能把document.domain设置成自身或更高一域,且主域必须相同。...iframe框架是不同域,所以我们是无法通过在页面书写js代码来获取iframe东西: function test(){...优点  不需要后端介入就可以做到域,一个函数外加两个参数(请求url,发送数据)就可以搞定;  移动端兼容性好; 缺点  无法做到一对一传递方式:监听需要做很多消息识别,由于postMessage

    71610

    前端跨了个域

    根据使用场景和方式不同,iframe 域分为以下几种: document.domain location.hash postMessage document.domain 适用场景:不同域,相同主域...这个时候,b 页面通过 iframe 内嵌在 a 页面iframe onload 事件是 a 脚本制定函数,用以获取 b 某个全局变量。...事件拿到对应数据 postMessage 这个方法就比较简洁明了:窗口和窗口都可以作为数据发送方和接收方,且不需要考虑是否同源。...调用方式: whichWindow.postMessage(message, targetOrigin); JSONP 域 这是一种古老且稳定域方式,兼容性好,但只支持获取数据(GET)。...它原理是: 前端通过 形式向后端发起请求,并在参数告知将用于处理数据函数名,同时在前端定义这个函数

    64620

    前端和前端联调各种姿势,了解一下

    在一个大需求里面,按照模块化分工的话,显然iframe里面的功能一个人负责,主页面另一个人负责。...不同的人负责东西同时展示在页面上交互,那么两个前端开发过程必然有联调过程 背景:页面index.html里面有一个iframeiframesrc为页面(另一个html链接),下文都是基于此情况下进行...而且需要iframeonload触发后才能使用postmessage iframe哈希变化通信 低门槛一种手段,可以页面 const iframe = document.querySelector...,并通过两个MessagePort 属性发送数据,而且在 Web Worker 可用。...页面下,给window挂上parentPageApis对象,是页面调用方法集合。

    1.4K10

    详解使用postMessage解决iframe域通信问题

    第一时间想到就是用iframe了,但问题来了,我和第三方web项目是有交互,这就违反同源策略了,处理域问题是最让人头疼事之一。...关于postMessage详细介绍请戳这里,不过MDN文档太详细了,导致有些同学看完还是一脸懵逼,下面我们就来看看怎么用postMessage实现iframe域通信,当你会用了之后再回去看文档,感觉是完全不同...是无法通信,因为它们是不同源(假设存在域问题),这时候就要用到postMessage了。...','*'); } 我们知道postMessage是挂载在window对象上,所以等iframe加载完毕后,用iFrame.contentWindow获取到iframewindow对象,然后调用...message事件,并且设置好回调函数即可,来看看打印出来event: event对象data属性存放着我们从父页面传过来数据,就这么简单!

    4K21

    JSONP && CORS

    ,不能解决不同域两个页面之间如何进行JavaScript调用问题 支持率 原理 被包含在一个回调函数JSON 核心则是动态添加标签来调用服务器提供js脚本 (允许用户传递一个callback...var allCookie = document.cookie; 注意,这种方法只适用于 Cookie 和 iframe 窗口,LocalStorage 和 IndexDB 无法通过这种方法,规避同源政策...窗口向窗口发送消息写法类似。...window.opener.postMessage('Nice to see you', 'http://aaa.com'); 窗口和窗口都可以通过message事件,监听对方消息。...event.source:发送消息窗口 event.origin: 消息发向网址 event.data: 消息内容  下面的例子是,窗口通过event.source属性引用窗口,然后发送消息。

    1.3K20

    详解JavaScript域问题

    JSONP也叫填充式JSON,是应用JSON一种新方法,只不过是被包含在函数调用JSON,例如: callback({"name","trigkit4"}); JSONP两部分组成:回调函数和数据...回调函数是当响应到来时应该在页面调用函数,而数据就是传入回调函数JSON数据。 在js,我们直接用XMLHttpRequest请求不同域上数据时,是不可以。...$.getJSON方法会自动判断是否域,不域的话,就调用普通ajax方法;域的话,则会以异步加载js文件形式来调用jsonp回调函数。...通过修改document.domain来域 浏览器都有一个同源策略,其限制之一就是第一种方法我们说不能通过ajax方法去请求不同源文档。...iframe框架是不同域,所以我们是无法通过在页面书写js代码来获取iframe东西: function test

    1.1K100

    Web前端学习笔记之前端域知识总结

    iframe框架是不同域,所以我们是无法通过在页面书写js代码来获取iframe东西: function test()...但要注意是,document.domain设置是有限制,我们只能把document.domain设置成自身或更高一域,且主域必须相同。  ...0x03 通过location.hash域 因为窗口可以对iframe进行URL读写,iframe也可以读写窗口URL,URL有一部分被称为hash,就是#号及其后面的字符,它一般用于浏览器锚点定位...所以我们可以通过script标签引入一个js或者是一个其他后缀形式(如php,jsp等)文件,此文件返回一个js函数调用。...$.getJSON方法会自动判断是否域,不域的话,就调用普通ajax方法;域的话,则会以异步加载js文件形式来调用jsonp回调函数

    1.1K30

    postMessagepostMessage

    HTML5学堂今日postMessage域教学流程 先为大家讲解postMessage基本知识 之后,我们书写一个实例:使用静态iframe,实现A域前端页面与B域前端页面之间数据传递 最后,我们使用...,B——>A数据交互),A域与B域通过iframe标签构建成父子关系 4.2 使用postMessage方法进行信息发送 4.3 使用message事件进行“信息发送”监听和数据(信息)接收...- 页面 A域 - HTML5学堂 <iframe id=...第16行代码,表示调用iframe包含页面(contentWindow表示iframe所在window对象)postMessage方法发送字符串“ok”,并规定只接收http://B域名下传过来数据...message事件用于监听是否存在postMessage通过postMessage方法传递过来所有信息都储存在message事件参数; 7.4 实现基本要求是,A域中包含B域,A域向B域

    3.1K60
    领券