uniapp使用iframe内嵌html并实现相互通信

最新推荐文章于 2024-05-22 18:00:57 发布

DytLisa

最新推荐文章于 2024-05-22 18:00:57 发布

阅读量1.2k

点赞数 4

文章标签： uni-app html vue.js

本文链接：https://blog.csdn.net/Dyt1_1/article/details/137016554

版权

本文介绍了如何在uniapp项目中使用iframe嵌入另一个HTML页面，并实现在Vue和iframe之间的双向通信，通过`postMessage`API实现跨域消息传递和方法调用。

摘要由CSDN通过智能技术生成

iframe

放到uniapp的static/web/viewer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe嵌入的页面</title>
</head>

<body>
    <button onclick="iframeSendMsg()">iframe向Vue传消息</button>
    <script>
        // iframe获取Vue传递过来的信息
        window.addEventListener("message", getVueMsg);
        function getVueMsg(event) {
            const res = event.data;
            if (res.cmd == 'myVue') {
                console.log('iframe获取Vue传递过来的信息', res)
            }
        };

        // iframe向vue传递信息
        function iframeSendMsg() {
            window.parent.postMessage({
                cmd: 'myIframe',
                params: {
                    info: 'iframe向Vue传递的消息',
                }
            }, '*');
        };
                //用于vue调用 
        function triggerByVue(msg) {
            console.log(msg)
        }
    </script>
</body>
</html>

vue

<template>
    <div class="wrap">
        <iframe ref="iframe" :src="`${viewerUrl}`" width="100%" height="50%" frameborder="0">
        </iframe>
        <button @click="vueSendMsg">vue向iframe传递信息</button>
        <button @click="iframeMethods">调用iframe中的方法</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            
                viewerUrl: '../../static/web/viewer.html',
            };
        },
        methods: {
            // vue获取iframe传递过来的信息
            getiframeMsg(event) {
                const res = event.data;
                console.log(event)
                if (res.cmd == 'myIframe') {
                    console.log(res)
                }
            },
            // vue向iframe传递信息
            vueSendMsg() {
                const iframeWindow = this.$refs.iframe.contentWindow;
                iframeWindow.postMessage({
                    cmd: 'myVue',
                    params: {
                        info: 'Vue向iframe传递的消息',
                    }
                }, '*')
            },
            // 触发iframe中的方法
            iframeMethods() {
                this.$refs.iframe.contentWindow.triggerByVue('通过Vue触发iframe中的方法');
            },
        },
        mounted() {
            window.addEventListener('message', this.getiframeMsg)
        },
    };
</script>


<style lang="scss" scoped>
    .wrap {
        width: 100%;
        height: 500px;
    }
</style>