首页
学习
活动
专区
工具
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.4K50

    同源策略和跨域解决方法

    无法读取 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数据,这种方法是不受同源策略限制的;服务器收到请求后,将数据放入指定的回调函数中返回。 ?

    2K70

    跨域详解

    由两部分组成:回调函数和数据 回调函数是当响应到来时页面中调用的函数,数据是传入回调函数中的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对象收集不到子iframe中的watcher,阻断了响应式,关键代码如下图: 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.2K50

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

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

    1.5K10

    前端跨了个域

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

    65620

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

    ,只能通过后台来解决  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

    73510

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

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

    4.5K21

    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

    postMessage与postMessage跨域

    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
    领券