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

uniapp使用iframe内嵌网页，并实现相互通信

DytList

5496人浏览 · 2024-03-25 15:49:44

DytList · 2024-03-25 15:49:44 发布

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>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

C语言常见概念

2048 AI社区

agno v2.3.21版本发布详解：AgentOS全面支持Agent As Judge评测与多项稳定性增强

Agno v2.3.21版本是一次扎实的迭代，它没有引入颠覆性的变更，而是在现有强大的基础上进行打磨和增强。对于评估与监控：通过将Agent as Judge深度集成到AgentOS，它为团队提供了企业级的智能体性能评估工具，使得基于LLM的定性评估变得可配置、可触发、可追溯。对于框架稳定性：对RunInput序列化和MistralEmbedder超时的修复，解决了特定场景下的潜在bug，提升了框