這篇文章主要介紹“vue項目嵌套iframe怎么實現發送、接收數據”，在日常操作中，相信很多人在vue項目嵌套iframe怎么實現發送、接收數據問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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>iframe在同域時能自由操作iframe和父框架的內容(DOM)，在跨域時可以實現頁面跳轉。
<iframe id="iframe" :src="iframeSrc" width="100%" frameborder="0"></iframe>
iframe.contentWindow, 獲取iframe的window對象
iframe.contentDocument, 獲取iframe的document對象
const _iframe = document.getElementById('iframe').contentWindow如果你設置的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()
}
})到此，關于“vue項目嵌套iframe怎么實現發送、接收數據”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
