From c91cdeaa922e6831469a85f0a51762545467c608 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 6 Feb 2025 16:01:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20iframe=E9=A1=B5=E9=9D=A2=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E5=90=8C=E6=BA=90=E7=9A=84=E4=BA=8B=E4=BB=B6=E7=9B=91?=
 =?UTF-8?q?=E5=90=AC=EF=BC=88=E5=8D=8F=E8=AE=AE=EF=BC=8C=E5=9F=9F=E5=90=8D?=
 =?UTF-8?q?=EF=BC=8C=E7=AB=AF=E5=8F=A3=E5=8F=B7=E5=AE=8C=E5=85=A8=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E4=B8=BA=E5=90=8C=E6=BA=90=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoHtml/iframe.html           | 33 +++++++++++++++++
 src/router/modules/demo.ts     |  4 ++
 src/views/demo/iframeEvent.vue | 68 ++++++++++++++++++++++++++++++++++
 vite.config.ts                 |  3 +-
 4 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 demoHtml/iframe.html
 create mode 100644 src/views/demo/iframeEvent.vue
diff --git a/demoHtml/iframe.html b/demoHtml/iframe.html
new file mode 100644
index 0000000..d2d3faa
--- /dev/null
+++ 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>
diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index 5f49a5d..deabe88 100644
--- 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
diff --git a/src/views/demo/iframeEvent.vue b/src/views/demo/iframeEvent.vue
new file mode 100644
index 0000000..16f9d19
--- /dev/null
+++ 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>
diff --git a/vite.config.ts b/vite.config.ts
index 6cccbf1..c285f9a 100644
--- 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: {
