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

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

news 2025/11/9 7:18:34

目录

  • 前言
  • 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

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/11/7 21:04:03

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/11/8 2:23:52

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/11/8 9:16:25

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/11/7 21:05:19

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/10/26 9:51:09

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2025/10/19 19:07:12