Vue3 + TypeScript 实现 iframe 嵌入与通信的完整指南以及全屏弹窗方案

创建一个 IframeComponent 组件,用于嵌入 iframe

创建 src/components/IframeComponent.vue 文件:

<template><div class="iframe-container"><iframe ref="iframeRef" :src="src" :style="iframeStyle" @load="handleIframeLoad"></iframe></div>
</template><script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';const props = defineProps({src: {type: String,required: true,},fullscreen: {type: Boolean,default: false,},
});const iframeRef = ref<HTMLIFrameElement | null>(null);const iframeStyle = computed(() => ({width: props.fullscreen ? '100vw' : '600px',height: props.fullscreen ? '100vh' : '400px',border: 'none',
}));const handleIframeLoad = () => {console.log('Iframe loaded');
};onMounted(() => {if (iframeRef.value) {iframeRef.value.addEventListener('load', handleIframeLoad);}
});
</script><style scoped>
.iframe-container {position: relative;overflow: hidden;
}
</style>

实现父子通信

创建 src/components/ParentComponent.vue 文件

<template><div class="parent-container"><h1>父组件</h1><button @click="sendMessage">向Iframe发送消息</button><button @click="toggleFullscreen">切换全屏</button><IframeComponentref="iframeComponentRef":src="iframeSrc":fullscreen="isFullscreen"/></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
import IframeComponent from './IframeComponent.vue';const iframeComponentRef = ref(null);
const iframeSrc = "https://example.com";
const isFullscreen = ref(false);const sendMessage = () => {const iframeWindow = iframeComponentRef.value?.iframeRef?.contentWindow;if (iframeWindow) {iframeWindow.postMessage("来自父组件的问候", "*");}
};const toggleFullscreen = () => {isFullscreen.value = !isFullscreen.value;
};
</script><style scoped>
.parent-container {padding: 20px;
}button {margin-right: 10px;margin-bottom: 10px;
}
</style>

iframe 接收消息

在 iframe 加载的页面中,需要添加代码来监听来自父页面的消息。

创建 public/iframe.html 文件:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Iframe页面</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;}.message-container {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}</style></head><body><div class="message-container"><h1>Iframe页面</h1><p id="message">等待消息...</p></div><script>window.addEventListener("message", (event) => {console.log("收到来自父页面的消息:", event.data);document.getElementById("message").textContent = `收到消息: ${event.data}`;});</script></body>
</html>

使用组件

在 App.vue 中使用创建的 ParentComponent

<template><div id="app"><ParentComponent /></div>
</template><script lang="ts" setup>
import ParentComponent from './components/ParentComponent.vue';
</script>

iframe 内置弹框全屏问题解决方案

  1. iframe 宽高设置全屏,背景透明,border 设为 0,position 设置为 absolute top,left 设为0。
  2. 内嵌的 html 页面添加padding限制实际展示大小(具体值可由父级传到子级)。
  3. 内嵌页面 bodypadding。
  4. 监听内嵌页面的鼠标移动事件,和父级鼠标移动事件,判断鼠标位置确定用户操作范围,动态修改 iframe 范围外的其他元素层级,以便鼠标点击。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode Hot 100:堆

LeetCode Hot 100&#xff1a;堆 215. 数组中的第K个最大元素 思路 1&#xff1a;优先队列 class Solution { public:int findKthLargest(vector<int>& nums, int k) {priority_queue<int> pq;for (int& num : nums)pq.push(num);for (int i 0; i <…

油豆视频油豆影视app系统源码-试看/付费/免费/vip

可以用作影视系统&#xff0c;短剧系统&#xff0c;视频付费系统等。 可打包app&#xff0c;打包看文档的引用教程。 同时支持免费&#xff0c;付费&#xff0c;试看&#xff0c;vip等模式。并支持添加广告。 大致功能&#xff1a; 支持多级分销支持设置会员组权限&#xff0c;…

vue3报错:找不到模块“element-plus”或其相应的类型说明

1.问题复现 2.首先去检查一下package.json中是否安装了element-plus 3.存在&#xff0c;就是另一个问题&#xff0c;模块没有被导出来 a.此时需要建立一个.d.ts文件&#xff08;在package.json同级目录下&#xff09; 4.写入代码保存&#xff0c;即可解决报错问题 declare mo…

安卓在windows连不上fastboot问题记录

fastboot在windows连不上fastboot 前提是android studio安装 google usb driver 搜索设备管理器 插拔几次找安卓设备 在其他设备 或者串行总线设备会出现安卓 右键更新驱动 下一步下一步然后可以了

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-21目录1. The Fair Language Model Paradox摘要研究背景问题与挑战如何解决创新点算法模型实验效果重要数据与结论推荐阅读指数&…

海外媒体发稿:如何打造媒体发稿策略

新闻媒体的发稿推广策略对于提升品牌知名度、吸引流量以及增加收入非常重要。本文将介绍一套在21天内打造爆款新闻媒体发稿推广策略的方法。 第一天至第七天&#xff1a;明确目标和定位 在这个阶段&#xff0c;你需要明确你的目标和定位&#xff0c;以便为你的新闻媒体建立一个…

群晖系统基本命令

切换超级管理员 sudo -i 查询系统 运行的所有服务 synoservicecfg --list 启动服务命令(该命令需要使用超级管理员) #老版本群晖使用synoservice命令 synoservice --start 服务名称#新版本群晖使用systemctl命令 systemctl start 服务名称 synoservice所管理的服务配置文…

Spring Cloud微服务

Spring Cloud 是一个专注于微服务架构的一站式解决方案&#xff0c;它通过整合多个优秀的开源框架和工具&#xff0c;为开发者提供了构建、管理和维护微服务系统所需的全方位支持。以下是关于 Spring Cloud 微服务的详细介绍&#xff1a; 基本概念 微服务架构&#xff1a;微服务…

Python小白学习教程从入门到入坑------第十四课 函数基础(语法基础)

一、函数 def 定义&#xff1a;将具有独立功能的代码块组织成一个整体&#xff0c;使其具有特殊功能的代码集 作用&#xff1a;使用函数可以加强代码的复用性&#xff0c;提高编程续写的效率 结构&#xff1a; def 函数名&#xff08;&#xff09;&#xff1a; 函数体 注…

Maven的依赖

一、依赖的基本配置 根元素project下的dependencies可以包含多个 dependence元素&#xff0c;以声明多个依赖。每个依赖都应 该包含以下元素&#xff1a; 1. groupId, artifactId, version : 依赖的基本坐标&#xff0c; 对于任何⼀个依赖来说&#xff0c;基本坐标是最…

【GIT】Visual Studio 中 Git 界面中, 重置 和 还原

在 Visual Studio 的 Git 界面中&#xff0c;“重置” 和 “还原” 是两个常用的 Git 操作。它们的主要区别在于应用场景和影响范围。 1. 重置&#xff08;Reset&#xff09; 重置用于更改当前分支的提交历史&#xff0c;通常用于撤销或删除某些提交。重置操作可能会更改 Git…

python网络爬虫基础:URL的组成与结构

URL&#xff08;Uniform Resource Locator&#xff0c;统一资源定位符&#xff09;&#xff0c;常被称为网页链接、网址&#xff0c;用于在互联网中唯一标识资源的位置。一个典型的 URL 包含以下几部分&#xff1a; 1. 协议&#xff08;Protocol&#xff09; 协议指定了访问资…

Flink CDC系列之:调研应用Flink CDC将 ELT 从 MySQL 流式传输到 StarRocks方案

Flink CDC系列之&#xff1a;调研应用Flink CDC将 ELT 从 MySQL 流式传输到 StarRocks方案 准备准备 Flink Standalone 集群准备 docker compose为 MySQL 准备记录使用 Flink CDC CLI 提交作业 同步架构和数据更改路由变更清理 本教程将展示如何使用 Flink CDC 快速构建从 MySQ…

[Ansible实践笔记]自动化运维工具Ansible(二):Ansible的playbook及角色

Ansible playbook&#xff08;剧本&#xff09; 详情请参考[Ansible实践笔记]自动化运维工具Ansible&#xff08;一&#xff09;&#xff1a;初探ansible&ansible的点对点模式 文章目录 Ansible playbook&#xff08;剧本&#xff09;介绍核心字段环境配置案例&#xff1…

React--》掌握Valtio让状态管理变得轻松优雅

Valtio采用了代理模式&#xff0c;使状态管理变得更加直观和易于使用&#xff0c;同时能够与React等框架无缝集成&#xff0c;本文将深入探讨Valtio的核心概念、使用场景以及其在提升应用性能中的重要作用&#xff0c;帮助你掌握这一强大工具&#xff0c;从而提升开发效率和用户…

【Go语言】

type关键字的用法 定义结构体定义接口定义类型别名类型定义类型判断 别名实际上是为了更好地理解代码/ 这里要分点进行记录 使用传值的例子&#xff0c;当两个类型不一样需要进行类型转换 type Myint int // 自定义类型&#xff0c;基于已有的类型自定义一个类型type Myin…

用kali入侵 DarkHole_2测试

进入kali系统调出root交互式界面 netdiscover -r 000.000.000.000/24 -------局域网探测IP工具 nmap 设备端口扫描 发现两个攻击点一个是80端口的Http 一个是22端口的ssh 发现有许多GIT文件 可能会出现git源码泄露 使用githack URL 命令还原git源文件 打开面板控制命令行 输入…

2.插入排序(斗地主起牌)

一、思想 扑克牌起牌 代码&#xff1a; 二、时间复杂度&#xff1a; 最好情况&#xff08;已经排序好的&#xff09;&#xff1a;T O(N) 最坏情况&#xff08;完全逆序&#xff09;&#xff1a;T O(N^2) 三、优劣&#xff1a; 严格的大小比较之后才进行错位插入&#x…

exchange_proxy exchange 安全代理

1. 软件简介 exchange_proxy 是由小米公司开发并开源的,以 go 语言开发的 exchange 安全代理,可以将内网的 exchange 服务器的 https 服务安全地发布出去, 支持的功能如下: WEB 端增加 OTP 二次认证手机端增加设备激活绑定的功能屏蔽了 PC 端的 EWS 协议(意思就是不支持)…

gin入门教程(5):请求参数处理

在 Gin 中&#xff0c;处理请求参数非常简单。您可以从 URL 路由、查询字符串和请求体中提取参数。以下是几种常见的处理方式&#xff1a; 1. URL 路由参数 如果您想从 URL 中获取参数&#xff0c;可以使用路由定义中的冒号&#xff08;:&#xff09;符号&#xff1a; r.GET…