feat: iframe页面是否同源的事件监听（协议，域名，端口号完全一致为同源）

11 months ago · c91cdeaa92
parent 295c573e0f
commit c91cdeaa92
4 changed files with 107 additions and 1 deletions
--- a/demoHtml/iframe.html
+++ b/demoHtml/iframe.html
@ -0,0 +1,33 @@
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>iframe嵌入页面</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background: #999;
            }
        </style>
    </head>
    <body>
        <div>
            <h3>我是iframe嵌入的子页面</h3>
            <button id="btn">点击我</button>
        </div>
    </body>
 </html>
 <script>
    onload = function () {
        document.getElementById('btn').addEventListener('click', function () {
            alert('子页面：你点击了按钮');
        });
    };
 </script>
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@ -48,6 +48,10 @@ const titleArr = [
        key: 'dynamicNodeEvent',
        title: '动态html加载的事件监听',
    },
    {
        key: 'iframeEvent',
        title: 'iframe页面的事件监听',
    },
 ];
 // @/views/demo/**/*.vue
--- a/src/views/demo/iframeEvent.vue
+++ b/src/views/demo/iframeEvent.vue
@ -0,0 +1,68 @@
 <template>
    <div class="iframe-event">
        <iframe
            id="iframe1"
            src="/demoHtml/iframe.html"
            frameborder="0"
            width="300"
            height="300"
        />
        <!-- 下面这个地址是使用的vscode启动的本地服务，每次需要手动修改和修改该地址，这里是为了模拟跨域情况 --->
        <iframe
            id="iframe2"
            src="http://localhost:52330/demoHtml/iframe.html"
            frameborder="0"
            width="300"
            height="300"
        />
    </div>
 </template>
 <script setup>
 import { onMounted } from 'vue';
 const getChildDocument = (iframe) => {
    let childDocument = null;
    try {
        childDocument = iframe.contentDocument || iframe.contentWindow.document;
    } catch (error) {
        console.log('无法访问跨域 iframe 的内容:', error);
    }
    return childDocument;
 };
 const initIframe = (idName) => {
    const iframe = document.getElementById(idName);
    // 确保子页面加载完成后再访问其 DOM
    iframe.onload = function () {
        const childDocument = getChildDocument(iframe);
        if (!childDocument) {
            return;
        }
        // 访问子页面的 DOM
        const childElement = childDocument.getElementById('btn');
        childElement.innerHTML = '我是同源，点击我'; // 修改子页面元素的文本
        childElement.style.color = 'red'; // 修改子页面元素的样式
        // 添加事件监听
        childElement.addEventListener('click', function () {
            alert('父页面：子页面按钮被点击了！');
        });
    };
 };
 onMounted(() => {
    initIframe('iframe1');
    initIframe('iframe2');
 });
 </script>
 <style scoped>
 .iframe-event {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
 }
 </style>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -38,7 +38,8 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
            rollupOptions: {
                input: {
                    index: pathResolve('./index.html', import.meta.url),
-                    demoHtml: pathResolve('./demoHtml/layout.html', import.meta.url),
+                    layoutHtml: pathResolve('./demoHtml/layout.html', import.meta.url),
                    iframeHtml: pathResolve('./demoHtml/iframe.html', import.meta.url),
                },
                // 静态资源分类打包
                output: {