当前位置： 首页 > news >正文

Vue 中如何嵌入可浮动的第三方网页窗口（附Demo）

news 2025/12/26 11:37:11

目录

  • 前言
  • 1. 思路Demo
  • 2. 实战Demo

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

1. 思路Demo

以下Demo提供思路参考，需要结合实际自身应用代码

下述URL的链接使用百度替代！

方式 1：使用 iframe 浮窗
可以创建一个固定在页面右下角的 iframe，让它加载该 script 生成的内容

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮窗嵌入</title><style>/* 浮窗样式 */#floating-window {position: fixed;bottom: 20px;right: 20px;width: 400px;height: 500px;border: none;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);background: white;z-index: 9999;border-radius: 10px;}/* 关闭按钮 */#close-btn {position: absolute;top: 5px;right: 5px;background: red;color: white;border: none;width: 25px;height: 25px;border-radius: 50%;cursor: pointer;font-size: 14px;line-height: 25px;text-align: center;}</style>
</head>
<body><!-- 按钮触发浮窗 --><button id="open-float">打开浮窗</button><!-- 浮窗框架 --><div id="floating-container" style="display: none;"><button id="close-btn">×</button><iframe id="floating-window" src="https://www.baidu.com/"></iframe></div><script>document.getElementById("open-float").addEventListener("click", function() {document.getElementById("floating-container").style.display = "block";});document.getElementById("close-btn").addEventListener("click", function() {document.getElementById("floating-container").style.display = "none";});</script></body>
</html>

方式 2：使用 div + script 动态加载
script 代码是动态生成 HTML 的，可以创建一个浮窗 div，然后在 div 里动态插入 script

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮窗嵌入 Script</title><style>#floating-div {position: fixed;bottom: 20px;right: 20px;width: 400px;height: 500px;border: 1px solid #ccc;background: white;z-index: 9999;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);display: none;border-radius: 10px;}#close-div-btn {position: absolute;top: 5px;right: 5px;background: red;color: white;border: none;width: 25px;height: 25px;border-radius: 50%;cursor: pointer;font-size: 14px;line-height: 25px;text-align: center;}</style>
</head>
<body><!-- 按钮触发浮窗 --><button id="show-div-btn">打开浮窗</button><!-- 浮窗内容 --><div id="floating-div"><button id="close-div-btn">×</button><div id="script-content"></div></div><script>document.getElementById("show-div-btn").addEventListener("click", function() {document.getElementById("floating-div").style.display = "block";let script = document.createElement("script");script.async = true;script.defer = true;script.src = "https://www.baidu.com/";document.getElementById("script-content").appendChild(script);});document.getElementById("close-div-btn").addEventListener("click", function() {document.getElementById("floating-div").style.display = "none";});</script></body>
</html>

方式 3：使用 dialog 元素
想要更现代化的 UI，可以使用 <dialog> 标签

<dialog id="floating-dialog"><button onclick="document.getElementById('floating-dialog').close()">关闭</button><iframe src="https://www.baidu.com/"></iframe>
</dialog><button onclick="document.getElementById('floating-dialog').showModal()">打开浮窗</button>

2. 实战Demo

下述实战代码为Vue2（项目源自bladex）

初始：
在这里插入图片描述

集成之后：
在这里插入图片描述

在 avue-top 组件里嵌入一个浮窗 div，然后动态加载 script，确保它能够嵌入 Vue 组件中

<template><div class="avue-top"><div class="top-bar__right"><el-tooltip effect="dark" content="打开浮窗" placement="bottom"><div class="top-bar__item" @click="toggleFloatingWindow"><i class="el-icon-monitor"></i> <!-- 你可以换成任意图标 --></div></el-tooltip></div><!-- 浮窗 --><div v-if="showFloatingWindow" class="floating-window"><button class="close-btn" @click="showFloatingWindow = false">×</button><iframe :src="floatingUrl"></iframe></div></div></template>

在 methods 里添加 toggleFloatingWindow 方法，控制浮窗的显示：

<script>
export default {data() {return {showFloatingWindow: false,floatingUrl: "http://xxxxx"};},methods: {toggleFloatingWindow() {this.showFloatingWindow = !this.showFloatingWindow;}}
};
</script>

添加 <style> 样式

<style lang="scss" scoped>
.floating-window {position: fixed;bottom: 20px;right: 20px;width: 400px;height: 500px;background: white;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);z-index: 9999;border-radius: 10px;border: 1px solid #ddd;overflow: hidden;
}.floating-window iframe {width: 100%;height: 100%;border: none;
}.close-btn {position: absolute;top: 5px;right: 5px;background: red;color: white;border: none;width: 25px;height: 25px;border-radius: 50%;cursor: pointer;font-size: 14px;line-height: 25px;text-align: center;
}
</style>

但这样会有个bug，每次点开隐藏都会刷新下网页

优化浮窗：防止重复加载内容
可以使用 v-show 而不是 v-if，这样 iframe 只会被隐藏，而不会被销毁，内容不会丢失

<div v-show="showFloatingWindow" class="floating-window"><button class="close-btn" @click="showFloatingWindow = false">×</button><iframe ref="floatingIframe" :src="floatingUrl"></iframe>
</div>

如果对应需要增加浮窗文字，可这样设置：

<el-tooltip effect="dark" content="管理小助手" placement="bottom"><div class="top-bar__item" @click="toggleFloatingWindow"><i class="el-icon-monitor"></i> <span class="floating-text">浮窗</span></div>
</el-tooltip>

添加样式

.floating-text {font-size: 15px;  /* 调整字体大小 */margin-left: 5px; /* 控制与图标的间距 */color: #fff;      /* 文字颜色 */
}

如果需要自定义图标，使用图片来代替：

可以使用 <img> 标签来替换 el-icon-monitor，具体修改如下：

<el-tooltip effect="dark" content="浮窗" placement="bottom"><div class="top-bar__item" @click="toggleFloatingWindow"><img src="@/assets/my-icon.png" class="custom-icon" alt="自定义图标" /><span class="floating-text">xx设备管理小助手</span></div>
</el-tooltip>

具体样式如下：

.custom-icon {width: 24px; /* 适当调整图标大小 */height: 24px;margin-right: 5px; /* 让图标和文本有一定间距 */
}

想让图片样式更加鲜艳：

.custom-icon {width: 24px;height: 24px;margin-right: 5px;filter: brightness(1.2) contrast(1.2); /* 提高亮度和对比度 */
}

文字的颜色：

使用 稍微鲜艳但不刺眼的颜色，让 文字更清晰，比如：

🔹 推荐颜色：
亮蓝色：#007bff（适合科技风）
柔和橙色：#ff9800（温暖醒目）
湖绿色：#17a2b8（清新不刺眼）
紫罗兰色：#6f42c1（优雅有辨识度）

🎨 修改 floating-text 颜色：

.floating-text {font-size: 15px;  margin-left: 5px; color: #007bff;  /* 亮蓝色，科技感强 */font-weight: bold; /* 让文字更清晰 */
}

相关文章：

Vue 中如何嵌入可浮动的第三方网页窗口（附Demo）

目录 前言1. 思路Demo2. 实战Demo 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 1. 思路Demo 以下Demo提供思路参考&#xff0c;需要结合实际自身应用代码 下述URL的链接使用百度替代&#xff01; 方式 1…...

编程日记 2025/2/6 20:17:03

【大数据技术】词频统计样例（hadoop+mapreduce+yarn）

词频统计（hadoop+mapreduce+yarn） 搭建完全分布式高可用大数据集群（VMware+CentOS+FinalShell） 搭建完全分布式高可用大数据集群（Hadoop+MapReduce+Yarn） 在阅读本文前，请确保已经阅读过以上两篇文章，成功搭建了Hadoop+MapReduce+Yarn的大数据集群环境。 写在前面 Wo…...

编程日记 2025/2/6 20:16:01

java进阶知识点

java回收机制 浅谈java中的反射 依赖注入的简单理解 通过接口的引用和构造方法的表达&#xff0c;将一些事情整好了反过来传给需要用到的地方~ 这样做得好处&#xff1a;做到了单一职责&#xff0c;并且提高了复用性&#xff0c;解耦了之后&#xff0c;任你如何实现&#xf…...

编程日记 2025/2/6 20:14:59

深度学习系列--02.损失函数

一.定义 损失函数&#xff08;Loss Function&#xff09;是机器学习和深度学习中用于衡量模型预测结果与真实标签之间差异的函数&#xff0c;它在模型训练和评估过程中起着至关重要的作用 二.作用 1.指导模型训练 提供优化方向&#xff1a;在训练模型时&#xff0c;我们的目…...

编程日记 2025/2/6 20:11:53

构建一个数据分析Agent：提升分析效率的实践

在上一篇文章中,我们讨论了如何构建一个智能客服Agent。今天,我想分享另一个实际项目:如何构建一个数据分析Agent。这个项目源于我们一个金融客户的真实需求 - 提升数据分析效率,加快决策速度。 从分析师的痛点说起 记得和分析师团队交流时的场景&#xff1a; 小张&#xff…...

编程日记 2025/2/6 20:05:45

在K8S中，如何把某个worker节点设置为不可调度？

在Kubernetes中&#xff0c;如果你想要把一个worker节点设置为不可调度&#xff0c;意味着你不想让Kubernetes调度器在这个节点上调度新的Pod。这通常用于维护或升级节点&#xff0c;或者当节点遇到硬件故障或性能问题时&#xff0c;要将某个worker节点设置为不可调度。 方法1…...

编程日记 2025/2/6 20:02:40

硬件电路基础

目录 1. 电学基础 1.1 原子 1.2 电压 1.3 电流 1.电流方向&#xff1a; 正极->负极,正电荷定向移动方向为电流方向&#xff0c;与电子定向移动方向相反。 2.电荷&#xff08;这里表示负电荷&#xff09;运动方向&#xff1a; 与电流方向相反 1.4 测电压的时候 2. 地线…...

编程日记 2025/2/6 19:56:34

5 前端系统开发：Vue2、Vue3框架（上）：Vue入门式开发和Ajax技术

文章目录 前言一、Vue框架&#xff08;简化DOM操作的一个前端框架&#xff09;&#xff1a;基础入门1 Vue基本概念2 快速入门&#xff1a;创建Vue实例&#xff0c;初始化渲染&#xff08;1&#xff09;创建一个入门Vue实例&#xff08;2&#xff09;插值表达式&#xff1a;{{表…...

编程日记 2025/2/6 19:55:32

阿里 Java 岗个人面经分享（技术三面 + 技术 HR 面）：Java 基础 +Spring+JVM+ 并发编程 + 算法 + 缓存

技术一面 20 分钟 1、自我介绍 说了很多遍了&#xff0c;很流畅捡重点介绍完。 2、问我数据结构算法好不好 挺好的&#xff08;其实心还是有点虚&#xff0c;不过最近刷了很多题也只能壮着胆子充胖子了&#xff09; 3、找到单链表的三等分点&#xff0c;如果单链表是有环的…...

编程日记 2025/2/6 19:50:25

vue2-给data动态添加属性

vue2-给data动态添加属性 1. 问题的来源 在VUe2中&#xff08;VUE3中使用了proxy&#xff0c;及时动态添加也能实现响应式&#xff09;&#xff0c;如果我们动态给data添加一个属性&#xff0c;会发现视图没有同步更新举个例子我们通过v-for遍历data中的一个属性list&#xf…...

编程日记 2025/2/6 19:49:24

Linux 文件和目录

Linux 文件和目录 文章目录 Linux 文件和目录Linux 目录Linux 目录配置的依据 --FHS目录树文件属性文件的分类一般权限 UGO特殊权限 suid\sgid\sticky隐藏属性 ATTR文件访问控制列表 ACL文件相关的命令权限的修改 chmod chown chgrp umaskchmodchgrpumask相关文档 /etc/profile…...

编程日记 2025/2/6 19:47:21

【大数据技术】本机DataGrip远程连接虚拟机MySQL/Hive

本机DataGrip远程连接虚拟机MySQL/Hive datagrip-2024.3.4VMware Workstation Pro 16CentOS-Stream-10-latest-x86_64-dvd1.iso写在前面 本文主要介绍如何使用本机的DataGrip连接虚拟机的MySQL数据库和Hive数据库，提高编程效率。 安装DataGrip 请按照以下步骤安装DataGrip软…...

编程日记 2025/2/6 19:44:19

Leetcode 3440. Reschedule Meetings for Maximum Free Time II

Leetcode 3440. Reschedule Meetings for Maximum Free Time II 1. 解题思路2. 代码实现 题目链接&#xff1a;3440. Reschedule Meetings for Maximum Free Time II 1. 解题思路 这一题某种意义上来说甚至是上一题Leetcode 3439的简化版本&#xff08;关于这一题的解答可以…...

编程日记 2025/2/6 19:41:15

专门记录台式电脑常见问题

1、蓝屏死机&#xff0c;检查内存硬盘和cpu 2、拆内存条&#xff0c;用橡皮擦金手指 3、放主板静电&#xff0c;扣主板电池 4、系统时间不正确&#xff0c;主板电池没电 5、开机键坏了 6、电脑主机的风扇转&#xff0c;正常通电运行&#xff0c;但显示器没信号。看键盘的num键&…...

编程日记 2025/2/6 19:40:13

[操作系统] 进程终止

在计算机操作系统中&#xff0c;进程&#xff08;Process&#xff09;是程序在运行中的实例&#xff0c;而进程的生命周期始于创建&#xff0c;终于终止。进程终止不仅仅意味着程序执行结束&#xff0c;还涉及资源的回收、状态的传递、以及可能的错误处理。在 Linux 和 Unix 系…...

编程日记 2025/2/6 19:39:13

[x86 ubuntu22.04]进入S4失败

目录 1 问题描述 2 解决过程 2.1 查看内核日志 2.2 新建一个交换分区 2.3 指定交换分区的位置 1 问题描述 CPU&#xff1a;G6900E OS&#xff1a;ubuntu22.04 Kernel&#xff1a;6.8.0-49-generic 使用“echo disk > /sys/power/state”命令进入 S4&#xff0c;但是无法…...

编程日记 2025/2/6 19:37:11

12.外观模式（Facade Pattern）

定义 外观模式&#xff08;Facade Pattern&#xff09; 是一种结构型设计模式&#xff0c;它通过为复杂的子系统提供一个统一的接口&#xff0c;使得子系统的使用更加简化。外观模式通常隐藏了复杂的内部子系统&#xff0c;使得客户端可以通过一个简单的接口与这些子系统进行交…...

编程日记 2025/2/6 19:35:09

ES6 入门教程：箭头函数、解构赋值及其他新特性详解

ES6 入门教程&#xff1a;箭头函数、解构赋值及其他新特性详解 ES6 入门教程&#xff1a;箭头函数、解构赋值及其他新特性详解引言什么是 ES6&#xff1f;箭头函数&#xff08;Arrow Functions&#xff09;1. 基本语法2. 常见特点&#xff08;1&#xff09;没有自己的 this 上下…...

编程日记 2025/2/6 19:27:01

win编译openssl

一、perl执行脚本 1、安装perl脚本 perl安装 2、配置perl脚本 perl Configure VC-WIN32 no-asm no-shared --prefixE:\openssl-x.x.x\install二、编译openssl 1、使用vs工具编译nmake 如果使用命令行nmake编译会提示“无法打开包括文件: “limits.h”“ 等错误信息 所以…...

编程日记 2025/2/6 19:24:58

51单片机看门狗系统

在 STC89C52 单片机中&#xff0c;看门狗控制寄存器的固定地址为 0xE1。此地址由芯片厂商在硬件设计时确定&#xff0c;但是它在头文件中并未给出&#xff0c;因此在使用看门狗系统时需要声明下这个特殊功能寄存器 sfr WDT_CONTR 0xE1; 本案将用一个小灯的工作状况来展示看门…...

编程日记 2025/2/6 19:23:56

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/12/22 10:48:22

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/12/25 20:50:44

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/12/16 5:19:07

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2025/12/14 4:22:48

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/12/24 20:34:21

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2025/12/25 1:15:59