本文介绍了在Vue2项目中嵌入可浮动的第三方网页窗口的实现方法,包括使用iframe、div+script和dialog元素等方式,并提供了一个实战Demo,展示了如何在Vue组件中动态加载和控制浮窗的显示,需要的朋友可以参考下
目录
1. 思路Demo2. 实战Demo1. 思路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>
添加样式
.floating-text { font-size: 15px; /* 调整字体大小 */ margin-left: 5px; /* 控制与图标的间距 */ color: #fff; /* 文字颜色 */}
