javascript - 删除谷歌驱动器 iframe 嵌入的两个播放按钮之一

Question

任何人都可以帮我解决这个问题，当我使用 iframe 嵌入一个谷歌驱动器视频时，它有两个播放按钮，如何删除其中一个？这仅在 Chrome 和 Safari 中发生，因此请在这些浏览器上进行测试。

<iframe src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview" width="400" height="300" allowfullscreen="true"></iframe>

正如您在 iframe 上看到的那样，您必须点击播放按钮两次。

我也不能使用 html5 播放器，因为大多数视频都很大。

这是我的 fiddle https://jsfiddle.net/1tav74q8/

Answer 1

长话短说；无法直接修改来自不属于您的不同来源的 iframe 中的内容。

---

如果您的 iframe 和主机具有相同的来源(域)，则它们之间的交互很容易，只需访问 document 对象即可获取元素。使用 jQuery 的示例:

• 要在 iframe 中隐藏宿主元素上的按钮，请使用:
  window.parent.jQuery('button').hide()。
• 要对主机隐藏 iframe 元素上的按钮，请使用:
  jQuery('iframe')[0].contentWindow.jQuery('button').hide()<

但是，如果主机和 iframe 不是同源的，则它们之间的交互将受到严格限制。您不能直接从主机向 iframe 的 javascript window 或 document 指示某些操作，反之亦然。由此可以肯定地说，从主机直接访问 iframe 的 DOM 元素绝对是不可能的。

关于Cross-origin script API accessSection from MDN的解释.

JavaScript APIs such as iframe.contentWindow, window.parent, window.open and window.opener allow documents to directly reference each other. When the two documents do not have the same origin, these references provide very limited access to Window and Location objects, as described in the next two sections.

To communicate further between documents from different origins, use window.postMessage.

您可以使用 window.postMessage 函数和 "message" 事件监听器，在主机和 iframe 之间发送和接收消息(反之亦然)。在您的情况下，您需要从主机发送消息以指示 iframe 隐藏按钮。然后在接收端(iframe)，获取所需的按钮然后将其隐藏。 但这种技术只有在你拥有这两个来源时才有效，你需要在 iframe 端声明 "message" 事件，并且由于你的 iframe 源是 drive .google.com 我假设你不是所有者，那绝对不可能。

更多解释:https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage