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é)合實際自身應用代碼

下述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)化浮窗：防止重復加載內(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue中嵌入可浮動的第三方網(wǎng)頁窗口的示例詳解

目錄

1. 思路Demo

2. 實戰(zhàn)Demo

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具