由于浏览器同源策略（same-origin policy）的严格限制，除非 iframe 与主页面同源，否则无法通过 javascript 访问其内部 dom（包括 `
在 Web 开发中，你尝试通过 iframe.contentDocument 或 iframe.contentWindow.document 查询内嵌
Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.
这意味着以下代码必然失败：
const iframe = document.getElementById("mainly");
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // ❌ 跨域时为 null
const video = iframeDoc.querySelector('video'); // ❌ 报错或返回 null✅ 可行的替代方案（需服务端或合作方配合）
-
同源代理封装（推荐）
将跨域视频资源通过你自己的后端代理（如 /proxy?url=https://example.com/video.mp4），再以同源<video id="localVideo" controls> <source src="/proxy?url=https://drive.google.com/uc?id=xxx" type="video/mp4"> </video>
const vid = document.getElementById('localVideo'); console.log(vid.currentTime); // ✅ 安全可读 -
使用支持 postMessage 的嵌入方（如 JW Player、YouTube）
部分服务商提供基于 postMessage 的 API（需 iframe src 显式启用 ?enablejsapi=1 等参数）。例如 YouTube iframe 支持监听 onStateChange 并获取播放时间：iframe.contentWindow.postMessage( JSON.stringify({ event: 'command', func: 'getCurrentTime', args: [] }), 'https://www.youtube.com' );⚠️ 但 mega.nz、Google Drive 嵌入页不开放此类 API，且无官方文档支持。
-
避免 iframe，改用
若目标是直接 MP4 链接（如 https://example.com/video.mp4），且该服务器响应头包含 Access-Control-Allow-Origin: *，则可绕过 iframe，直接创建const video = document.createElement('video'); video.src = 'https://trusted-cdn.com/file.mp4'; // ✅ 需服务端配置 CORS video.addEventListener('loadedmetadata', () => { console.log('Duration:', video.duration); });
❌ 不可行的常见误区
- 使用 setInterval 轮询 document.activeElement → 无法定位 iframe 内部节点，且 activeElement 仅反映焦点元素，与视频无关；
- 依赖 iframe.onload 触发 DOM 查询 → 跨域下 contentDocument 仍不可访问；
- 尝试 iframe.sandbox="allow-scripts allow-same-origin" → 若 iframe 本身跨域，allow-same-origin 无效（会被浏览器忽略）。
总结
没有合法、通用、客户端纯 JS 的方式检测任意跨域 iframe 中的 元素或获取其 currentTime。 这是浏览器安全模型的硬性限制，而非技术缺陷。如需实现视频状态监控，请优先采用同源代理、服务端预处理或选用支持标准消息通信的嵌入方案（如 YouTube、Vimeo），并始终以服务端可控的方式设计架构。
