vue项目嵌套iframe实现发送、接收数据
目录
vue嵌套iframe发送、接收数据
vue中iframe的使用
获取iframe里面的内容
CDM跨域
vue嵌套iframe发送、接收数据<template>
<div class="home">
<iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe>
</div>
</template>
<script>
export default {
mounted() {
let mapFrame = this.$refs['mapFrame']
if (mapFrame.attachEvent){ //兼容浏览器判断
mapFrame.attachEvent("onload", function(){
let iframeWin = mapFrame.contentWindow
iframeWin.postMessage({
method: 'getBaseInfo',
data:'我是vuex state的数据'
},'*')
})
} else {
mapFrame.onload = function(){
let iframeWin = mapFrame.contentWindow
iframeWin.postMessage({
method: 'getBaseInfo',
data:'我是vuex state的数据'
},'*')
}
}
}
}
</script>
<style scoped lang="stylus">
.home {
.mapFrame {
height: 300px;
width: 500px;
}
}
</style>
子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iframe嵌套网页测试</title>
</head>
<body>
<script>
window.addEventListener('message',function(e){
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
console.log(e.origin,e.data)
})
// window.postMessage({
// method:'localtest',
// data:'ddddddddddddddddddddddddddddd'
// },'*')
</script>
</body>
</html>
vue中iframe的使用
iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。
<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>
获取iframe里面的内容
iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象
const _iframe = document.getElementById('iframe').contentWindow
CDM跨域
如果你设置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)进行跨域消息的传递。
发送消息: 使用postmessage方法
postMessage(message, targetOrigin)
message: 传递给iframe的内容, 通常是string,最好不要传object对象，需要传对象时，使用JSON.stringfy转换。
targetOrigin: 接受你传递消息的域名，可以设置绝对路径，也可以设置""或者"/"。 表示任意域名都行，"/"表示只能传递给同域域名。
_iframe.postMessage(JSON.stringify(_obj), '*')
接受消息: 监听message事件
当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性，data,origin,source.
window.addEventListener('message', function (event) {
console.log(event)
if (event.origin === window.callBackUrl.iframeSrc) {
_this.childData = event.data
console.log(event.data)
_this.saveForm()
}
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
