Vue中嵌入可浮動的第三方網(wǎng)頁窗口的示例詳解
更新時間：2025年02月06日 11:43:21 作者：碼農(nóng)研究僧
本文介紹了在Vue2項目中嵌入可浮動的第三方網(wǎng)頁窗口的實現(xiàn)方法,包括使用iframe、div+script和dialog元素等方式,并提供了一個實戰(zhàn)Demo,展示了如何在Vue組件中動態(tài)加載和控制浮窗的顯示,需要的朋友可以參考下
1. 思路Demo
以下Demo提供思路參考，需要結(jié)合實際自身應(yīng)用代碼
下述URL的鏈接使用百度替代！
方式 1：使用 iframe 浮窗
可以創(chuàng)建一個固定在頁面右下角的 iframe，讓它加載該 script 生成的內(nèi)容
<!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;
}
/* 關(guān)閉按鈕 */
#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>
<!-- 按鈕觸發(fā)浮窗 -->
<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 動態(tài)加載
script 代碼是動態(tài)生成 HTML 的，可以創(chuàng)建一個浮窗 div，然后在 div 里動態(tài)插入 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>
<!-- 按鈕觸發(fā)浮窗 -->
<button id="show-div-btn">打開浮窗</button>
<!-- 浮窗內(nèi)容 -->
<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 元素
想要更現(xiàn)代化的 UI，可以使用 <dialog> 標簽
<dialog id="floating-dialog">
<button onclick="document.getElementById('floating-dialog').close()">關(guān)閉</button>
<iframe src="https://www.baidu.com/"></iframe>
</dialog>
<button onclick="document.getElementById('floating-dialog').showModal()">打開浮窗</button>
2. 實戰(zhàn)Demo
下述實戰(zhàn)代碼為Vue2（項目源自bladex）
初始：
集成之后：
在 avue-top 組件里嵌入一個浮窗 div，然后動態(tài)加載 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，每次點開隱藏都會刷新下網(wǎng)頁
優(yōu)化浮窗：防止重復(fù)加載內(nèi)容
可以使用 v-show 而不是 v-if，這樣 iframe 只會被隱藏，而不會被銷毀，內(nèi)容不會丟失
<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; /* 調(diào)整字體大小 */
margin-left: 5px; /* 控制與圖標的間距 */
color: #fff; /* 文字顏色 */
}
到此這篇關(guān)于Vue中嵌入可浮動的第三方網(wǎng)頁窗口的示例詳解的文章就介紹到這了,更多相關(guān)Vue嵌入第三方網(wǎng)頁窗口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3 onMounted異步函數(shù)同步請求async/await實現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請求async/await實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了vue3 pinia踩坑及解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
Vue Element Sortablejs實現(xiàn)表格列的拖拽案例詳解
這篇文章主要介紹了Vue Element Sortablejs實現(xiàn)表格列的拖拽案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
Vue實現(xiàn)數(shù)據(jù)導(dǎo)入的四種方法(resource、Axios、Fetch、Excel導(dǎo)入)
本文主要介紹了Vue實現(xiàn)數(shù)據(jù)導(dǎo)入的四種方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2023-07-07
vue-cli webpack模板項目搭建及打包時路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項目搭建以及打包時路徑問題的解決方法,需要的朋友可以參考下2018-02-02
解決vue項目報錯webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項目報錯webpackJsonp is not defined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue2?與?Vue3?的數(shù)據(jù)綁定原理及實現(xiàn)
這篇文章主要介紹了Vue2與Vue3的數(shù)據(jù)綁定原理及實現(xiàn)，數(shù)據(jù)綁定是一種把用戶界面元素的屬性綁定到特定對象上面并使其同步的機制，使開發(fā)人員免于編寫同步視圖模型和視圖的邏輯2022-09-09
vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼
這篇文章主要介紹了vue動態(tài)綁定組件子父組件多表單驗證功能的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
element-ui修改el-form-item樣式的詳細示例
在使用element-ui組件庫的時候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui修改el-form-item樣式的詳細示例,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue3+el-table實現(xiàn)行列轉(zhuǎn)換
在處理文本數(shù)據(jù)的時候,我們經(jīng)常會需要把文本數(shù)據(jù)的行與列進行轉(zhuǎn)換操作，這樣更方便查看，本文就詳細的介紹了vue3+el-table實現(xiàn)行列轉(zhuǎn)換，感興趣的可以了解一下2021-06-06