Vue 模态框中 ShareThis 失效？两种解决方案帮你解决！

2024-08-08 20:27:30

Vue 模态框中 ShareThis 功能失效的解决方案

在 Vue 项目中集成社交分享功能时，ShareThis 提供了便捷的解决方案。然而，最近在开发过程中，我发现将 ShareThis 按钮放置在模态框内会导致其功能失效，点击后没有任何响应，同时控制台也没有任何报错信息。

深入问题根源

经过仔细排查，我发现问题主要源于模态框的生命周期和 ShareThis 脚本的加载机制之间的冲突。

通常情况下，我们会在模态框打开时动态加载 ShareThis 脚本，并在加载完成后进行初始化。然而，由于模态框的动态创建和销毁特性，当模态框关闭时，ShareThis 脚本很可能被一并移除。因此，下次打开模态框时，ShareThis 脚本需要重新加载，导致初始化失败，按钮无法正常工作。

解决方案解析

针对这一问题，我们可以采用两种解决方案：

全局加载 ShareThis 脚本： 将 ShareThis 脚本放置在 Vue 应用的入口文件（例如 index.html）中，确保脚本在应用初始化时就加载到全局作用域。
缓存 ShareThis 实例： 在第一次加载 ShareThis 脚本后，将其实例缓存起来，并在后续模态框打开时直接使用缓存的实例，避免重复加载和初始化。

方案一：全局加载 ShareThis 脚本

将以下代码添加到 index.html 文件的 <head> 标签内，并确保其位于 <script> 标签之前：

<script>
  window.__sharethis__ = window.__sharethis__ || {};
  window.__sharethis__.id = 'YOUR_PROPERTY_ID'; // 将 YOUR_PROPERTY_ID 替换为你的 ShareThis Property ID
</script>
<script async src="https://platform-api.sharethis.com/js/sharethis.js#property=YOUR_PROPERTY_ID&product=sop"></script>

全局加载的优势和不足

优势： 简单直接，无需修改 Vue 组件代码。
不足： ShareThis 脚本会在应用启动时加载，即使在用户不使用分享功能的情况下，也会增加页面加载时间，影响性能。

方案二：缓存 ShareThis 实例

// 创建一个用于存储 ShareThis 实例的变量
let shareThisInstance = null;

const handleExternalShare = () => {
  // 如果实例已存在，直接调用 initialize 方法
  if (shareThisInstance) {
    shareThisInstance.href = window.location.href;
    shareThisInstance.initialize();
    return;
  }

  // 如果实例不存在，则加载脚本并初始化
  const script = document.createElement('script');
  script.src = `https://platform-api.sharethis.com/js/sharethis.js#property=YOUR_PROPERTY_ID&product=sop`;
  script.onload = () => {
    shareThisInstance = window.__sharethis__;
    shareThisInstance.href = window.location.href;
    shareThisInstance.initialize();
  };
  document.body.appendChild(script);
};