如何在第三方网站上通过嵌入脚本实现点击链接弹出指定尺寸的视频播放窗口-js教程-PHP中文网

如何在第三方网站上通过嵌入脚本实现点击链接弹出指定尺寸的视频播放窗口

本文介绍一种轻量、跨域兼容的方案：为第三方网站提供一段可嵌入的 javascript 代码，使其页面中带有特定属性的链接点击后，自动以自定义宽高弹出新窗口并播放你的视频内容。

本文介绍一种轻量、跨域兼容的方案：为第三方网站提供一段可嵌入的 javascript 代码，使其页面中带有特定属性的链接点击后，自动以自定义宽高弹出新窗口并播放你的视频内容。

要实现在他人网站（即第三方域名）上点击链接后弹出你托管的视频播放窗口，核心思路是：不依赖服务端权限或跨域通信，而是通过客户端嵌入式脚本劫持目标链接行为。由于浏览器同源策略限制，你无法直接控制第三方页面的 DOM 或 JS 执行环境，但可通过用户主动嵌入你提供的 <script> 实现事件绑定。</script>

✅ 推荐实现方式：提供标准化嵌入代码

将以下代码封装为“一键嵌入脚本”，供用户复制粘贴到其网页

底部（或中）：

<script>
(function() {
  function initPopupLink() {
    const link = document.querySelector('a[data-popup-video]');
    if (!link) return;

    link.addEventListener('click', function(e) {
      e.preventDefault();
      const url = this.href || '';
      if (!url) return;

      // 自定义窗口尺寸与特性（禁用工具栏/菜单栏提升沉浸感）
      const features = 'width=640,height=480,left=' + 
                       Math.round((screen.width - 640) / 2) + 
                       ',top=' + Math.round((screen.height - 480) / 2) +
                       ',toolbar=no,menubar=no,location=no,status=no,scrollbars=yes,resizable=yes';

      window.open(url, 'VideoPopup', features);
    });
  }

  // 确保 DOM 加载完成后再执行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initPopupLink);
  } else {
    initPopupLink();
  }
})();
</script>

? 使用说明（给你的用户）

在他们的网页中添加带属性的链接：

Javascript Sdk
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载
```
<a href="https://yourdomain.com/player.html?videoId=abc123" data-popup-video>▶ 观看演示视频</a>
```
⚠️ 注意：href 必须指向你完全可控的页面（如 player.html），该页面内嵌视频播放器（如 HTML5
将上述 <script> 块插入其页面任意位置（推荐放在前）</script>
脚本采用 IIFE 封装，避免污染全局变量，并自动处理 DOM 加载时机。

? 重要注意事项

跨域限制不可绕过：window.open() 只能打开你自己的页面（同源或显式允许的跨域资源），不能直接在弹窗中加载第三方视频页（如 raw YouTube URL）并控制播放——建议在 player.html 中用安全嵌入。
弹窗拦截风险：现代浏览器普遍拦截非用户手势触发的 window.open()。本方案通过 click 事件触发，符合“用户主动交互”要求，基本可绕过拦截。
移动端兼容性：iOS Safari 和部分安卓浏览器会忽略 width/height 参数，强制全屏打开；建议在 player.html 中添加 viewport 元标签并使用 CSS 控制布局：
```
<meta name="viewport" content="width=device-width, initial-scale=1"><style>body { margin: 0; padding: 0; max-width: 640px; margin: auto; }</style>
```
安全性增强：若需传递参数（如视频 ID），推荐使用 URL 查询字符串（如 ?v=xyz），并在 player.html 中用 URLSearchParams 解析，避免 XSS 风险。