vue項目嵌套iframe實現(xiàn)發(fā)送、接收數(shù)據(jù)

更新時間：2022年05月31日 15:13:51 作者：夢一場江南煙雨

這篇文章主要介紹了vue項目嵌套iframe實現(xiàn)發(fā)送、接收數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue嵌套iframe發(fā)送、接收數(shù)據(jù)

<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的數(shù)據(jù)'
? ? ? ? ? ? ? ? ? ? },'*')
? ? ? ? ? ? ? ? })
? ? ? ? ? ? } else {?
? ? ? ? ? ? ? ? mapFrame.onload = function(){?
? ? ? ? ? ? ? ? ? ? let iframeWin = mapFrame.contentWindow
? ? ? ? ? ? ? ? ? ? iframeWin.postMessage({
? ? ? ? ? ? ? ? ? ? ? ? method: 'getBaseInfo',
? ? ? ? ? ? ? ? ? ? ? ? data:'我是vuex state的數(shù)據(jù)'
? ? ? ? ? ? ? ? ? ? },'*')
? ? ? ? ? ? ? ? }?
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? }
? ? }
</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嵌套網(wǎng)頁測試</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和父框架的內(nèi)容(DOM)，在跨域時可以實現(xiàn)頁面跳轉(zhuǎn)。

<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>

獲取iframe里面的內(nèi)容

iframe.contentWindow, 獲取iframe的window對象
iframe.contentDocument, 獲取iframe的document對象

const _iframe = document.getElementById('iframe').contentWindow

CDM跨域

如果你設(shè)置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)進行跨域消息的傳遞。

發(fā)送消息: 使用postmessage方法

postMessage(message, targetOrigin)

message: 傳遞給iframe的內(nèi)容, 通常是string,最好不要傳object對象，需要傳對象時，使用JSON.stringfy轉(zhuǎn)換。
targetOrigin: 接受你傳遞消息的域名，可以設(shè)置絕對路徑，也可以設(shè)置""或者"/"。表示任意域名都行，"/"表示只能傳遞給同域域名。

_iframe.postMessage(JSON.stringify(_obj), '*')

接受消息: 監(jiān)聽message事件

當(dāng)targetOrigin接受到message消息之后,會觸發(fā)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()
? ? ? }
? ? })

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: