vue 向iframe postMessage

2024-10-23

vue 给嵌套的iframe子页面传数据 postMessage

Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe> 父页面发送数据参数: <script> e

使用 iframe + postMessage 实现跨域通信

在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMessage postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档.多窗口.跨域消息传递. 语法: otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow:其他窗口的引用,如

vue中使用postMessage进行跨越传值

想在“当前位置”获取子页面的title属性,但是main页面和子页面在不同的端口上,直接获取会出现: “Blocked a frame with origin from accessing a cross-origin frame”跨域问题于是改用postMessage进行跨域访问: 子页面中: mounted(){ this.frameInfo(); }, methods: { frameInfo(){ var data = document.title; console.log(data)

vue项目iframe的传值问题

前言项目需要,我需要引入一个已经封装好的浏览器插件.插件只能以html的方式调用, 所以.我把插件的使用封装了一个html页面.vue项目则利用iframe的方式引入. 到这里我就遇到了一个问题,那就是vue项目中iframe的传值问题,这里做个笔记防止之后忘记, 如果有其他的方式,欢迎大家交流,不胜感激. 正文先写几个简易的demo 需要用到的html <!DOCTYPE html> <html lang="en" style="height: 100

JS 互相调用iframe页面中js方法、VUE里 iframe 互调方法

1,父 html 调用子 iframe 内方法: document.getElementById("iframe").contentWindow.func(data1,data2...); 2,子 Iframe 中调用父html中方法: parent.func(data1,data2...) 在VUE中: // 父vue文件调用 iframe html文件中方法:this.$refs.iframe.contentWindow.func(data1,data2...); // 在 i

Vue中iframe和组件的通信

最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue中我们需要在vue文件注册一个全局的方法,在iframe中某个事件触发时,可以回传到vue组件 demo.vue主要代码: <template> <iframe ref="iframe" src='test.html'> </iframe> </t

vue中iframe加载慢，给它加loading效果

js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> <div style="height:100%;overflow: auto;" v-loading="loading"> <iframe ref="iframe" :src="src" width="100%

window.postMessage 跨窗口，跨iframe javascript 通信

同源通信执行它们的页面位于具有相同的协议(http/https),端口(80/443),主机(通常为域名) 时,这两个脚本才能相互通信大多数情况下,网站就是内部的域名,所以是同源通信,可以相互访问非同源通信不同域名,不同窗口,内嵌iframe(可能是外部域名地址) 这种就是非同源通信, window.postMessage() 方法可以安全地实现跨源通信来自H5 api,没想到吧,h5还有个这样的方法*.* 语法 otherWindow.postMessage(message, tar

VUE 高德地图选取地址组件开发

高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key <template> <div> <div id="iframe"> <iframe class="map-item" v-if="ismap" id="getAddress" @load=&

Iframe父子窗口之间的跨域事件调用和传值

实现方案1:location.hash传值父页面:parent.html(所在域:www.parent.com) 子页面:child.html(所在域:www.child.com) 要实现父子页面双向的事件调用和传值,需要多加一个代理页面,主要用于子页面调用父页面的方法代理页面:proxy.html(所在域:www.parent.com)必须与父页面在同域下父页面调用子页面方法(即事件通过父页面发起,在子页面中执行): 父页面中直接设置iframe的src中的hash值 parent.ht

使用postMessage实现跨域解决'Failed to execute 'postMessage' on 'DOMWindow''

使用iframe+postMessage解决跨域问题,首先来过一遍其中的原理咯原理: 发送方使用postMessage方法向接收方推送消息,第一个参数为推送的内容,第二个参数是允许被访问的域名: 接收方通过监听message的方法接收数据. 实现跨域就需要有两个不同源的服务器咯我在本地开启了两个不同端口的tomcat:(以下是我的文件路劲) ①tomcat/webapps/iframe/parent.html(端口号8088) ②tomcat1/webapps/iframe/child.ht

HTML5 window/iframe跨域传递消息 API

原文地址:HTML5′s window.postMessage API 在线示例:Using HTML5's window.postMessage(请打开控制台看日志) 原文日期: 2010年09月03日翻译日期: 2013年08月24日我写了一个 MooTools 的插件"PostMessager"来封装window.postMessage,你可以点击这里下载! HTML5 的 window.postMessage 接口API 还没有多少人了解. window.postMes

html5的postmessage实现js前端跨域訪问及调用解决方式

关于跨域訪问.使用JSONP的方法.我前面已经demo过了.详细见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个很强大的API.叫postMessage.它事实上就是曾经iframe的进化版本号,使用起来极其方便,这里举个实验样例: 我们依然依照与上文同样的设定.假定我们有2个Domain Domain1: http://localhost:8080 它上面有个应用叫HTMLDomain1,而且有个页面叫sender

iframe 父子互传消息,父页面滚动，子页面触发父页面高度

https://blog.csdn.net/qq_38366657/article/details/81538145 // 父页面的js<iframe id='TopHeader' src="XXX"></iframe> $(window).scroll(function () { var scrollTop = $(window).scrollTop() console.log(scrollTop, '1111'); if (scrollTop > 60

HTML5中window.postMessage，在两个页面之间的数据传递

HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览关于postMessage window.postMessage虽然说是html5的功能,但是支持IE8+,假如你的网站不需要支持IE6和IE7,那么可以使用window.postMessage.关于window.postMessage,很多朋友说他可以支持跨域,不错,window.postMessage是客户端和客户端直接的数据传递,既可以跨域传递,也可以同域传递. 应用场景我只

PostMessage xss学习和挖掘

PostMessage xss很有趣,在国外出现了很多次,国内src/众测从没遇到过,挖到过.可能境界还不够,有机会再去试试.好几年前记得心血来潮学过一次,都是半知半解,后来因为重要性不高,不了了之了,今天重新捡起来. PostMessage的含义:参考MDN: Window.postmessage()方法可以安全地实现Window对象之间的跨源通信;例如,在页面和它派生的弹出窗口之间,或者在页面和其内嵌的iframe之间. 简单点来说,我是这样理解的:发送相应数据到目标页面,目标页面接收传输的

PHP 面试知识点整理归纳

基础篇了解大部分数组处理函数 array_chunk — 将一个数组分割成多个 array_column — 返回数组中指定的一列 array_combine — 创建一个数组,用一个数组的值作为其键名,另一个数组的值作为其值(另一种意义的合并数组) array_flip — 交换数组中的键和值 array_key_exists — 检查数组里是否有指定的键名或索引 array_key_first — Gets the first key of an array array_k

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的. Web Storage分为两种: <1>sessionStorag

JavaScript 跨域漫游

前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:<Iframe 功能详解>. 在做公司项目的过程中,让我纠结之一的就是iframe的跨域问题,在网上查到的资料,基本都是给个思路,加个DEMO,也没有完整的解决方案.所以这里我结合公司的项目实际需求,从新整理了一下javaScript跨域的相关方法. PS:请转载的童鞋,请注明出处 ... 目录: 一

读javascript高级程序设计12-HTML5脚本编程

一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性,如果发现域不匹配则不会进行操作. 2.接收消息接收到消息时,会触发window对象的message事件.传递给onmessage事件处理程序的对象主要包含三个信息: data:对应postMessage()第一个参数传入的内容: origin:发送消息的文档所在域.接收到消息后,检测消息来源是非常

Html5中的跨页面消息传输

1.如果要接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监控. window.addEventListener("message",function(){},false); 使用window对象的postMessage方法向其他窗口发送消息, otherwindow.postMessage(message,targetOrigin); 参数:message为所发送的消息文本,但也可以是任何javascript对象; 第二个参数为接受消息的对象窗口的URL地址

vue 向iframe postMessage

热门专题