我要评论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>
添加样式
.floating-text {
font-size: 15px; /* 调整字体大小 */
margin-left: 5px; /* 控制与图标的间距 */
color: #fff; /* 文字颜色 */
}
到此这篇关于vue中嵌入可浮动的第三方网页窗口的示例详解的文章就介绍到这了,更多相关vue嵌入第三方网页窗口内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论