相信很多小伙伴在项目中都会遇到需要嵌入外链页面的情况,这时候很可能会遇到一个问题,就是如何在iframe子页面自己的项目页面之间传值,特别是跨域的情况
1. 同域的情况
1.1 相互获取dom元素
1.1.1 在父页面获取子页面的dom元素:
//先获取 iframe,再在iframe所在的 document 找 dom 元素,根据id查找;
document.getElementById('iframe').contentWindow.document.getElementById('domId');
1.1.2 子页面获取父页面的dom元素
// window.parent可以回到父页面
window.parent.document.getElementById('domid');
1.2 相互调用方法
父页面调用子页面方法:
iframeName.window.childMethod();
子页面调用父页面方法:
parent.window.parentMethod();
1.3 相互调用变量
父页面访问子页面变量:
document.getElementById('iframe').name(子页面变量名);
子页面访问父页面变量:
parent.name(父页面变量名);
2. 跨域的情况
同域情况比较简单,主要说一下跨域情况下的方案,一般有两种解决方案。一种是建立一个代理页面,通过代理页面传值。另一种是通过H5的 postMessage 方法实现。
这里说一下第二种方案,并且以vue项目举例
2.1 子页面向父页面传值
vue父页面
created() {
window.addEventListener('message', e => {
// e.data为子页面发送的数据
console.log(e.data);
})
}
iframe子页面
// 第一个参数 data 为传输的数据,第二个参数可以指定接收源
document.getElementById('iframe').contentWindow.postMessage(data,'*')
2.2 父页面向子页面发送数据
vue父页面
// 注意:这里 vue 中需要写在 mounted 中,保证能拿到 iframe 的dom元素
mounted() {
// 这里也可以使用 getElementById 获取 iframe 元素
const iframe = this.$refs.iframe
iframe.contentWindow.postMessage(data,'*')
}
iframe子页面
window.addEventListener('message', e => {
// e.data为父页面发送的数据
console.log(e.data);
})
2.3 还可以做安全性优化
上面的接收源都是使用’*’,也就是不限制接收源的IP,端口
如果出于安全性考虑,可以使用以下方法进行优化
发送方:
postMessage方法指定第二个参数,如http://www.baidu.com
接收方:
监听 message 的回调,使用e.origin判断信息来源
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!