127  
查询码:00001054
Vue页面向嵌套的iframe中的html页面传值
作者: 郁冲冲 于 2020年03月25日 发布在分类 / 人防组 / 人防前端 下,并于 2020年03月25日 编辑
iframe传值 postMessage()

使用:

1、postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递


2、postMessage(data,origin)方法接受两个参数:

(1)data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果,

(2)origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/";



具体参数详解释:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

案例:

粘贴图片

粘贴图片



 推荐知识

 历史版本

修改日期 修改人 备注
2020-03-25 16:53:52[当前版本] 郁冲冲 1.1.0

 附件

附件类型

PNGPNG

知识分享平台 -V 4.8.7 -wcp