Vue中嵌入可浮动的第三方网页窗口的示例详解

时间：2025-03-19 10:39:02 JavaScript 我要投稿

本文介绍了在Vue2项目中嵌入可浮动的第三方网页窗口的实现方法,包括使用iframe、div+script和dialog元素等方式,并提供了一个实战Demo,展示了如何在Vue组件中动态加载和控制浮窗的显示,需要的朋友可以参考下

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）

初始：

Vue中嵌入可浮动的第三方网页窗口的示例详解(图1)

集成之后：

Vue中嵌入可浮动的第三方网页窗口的示例详解(图2)

在 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="https://www.jb51.net/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="https://www.jb51.net/floatingUrl"></iframe>
</div>

添加样式

.floating-text {
  font-size: 15px;  /* 调整字体大小 */
  margin-left: 5px; /* 控制与图标的间距 */
  color: #fff;      /* 文字颜色 */
}

到此这篇关于Vue中嵌入可浮动的第三方网页窗口的示例详解的文章就介绍到这了,更多相关Vue嵌入第三方网页窗口内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

上一篇：JS中console对象内部提供调试方法示例详解

下一篇：Vue3封装实现右键菜单组件

Vue中嵌入可浮动的第三方网页窗口的示例详解相关文章

Vue中嵌入可浮动的第三方网页窗口的示例详解

目录

1. 思路Demo

2. 实战Demo