从父页面控制嵌入式 slide.es 演示文稿中的显示 API答案

【问题标题】：Controlling reveal API in embedded slid.es presentation from parent page从父页面控制嵌入式 slide.es 演示文稿中的显示 API
【发布时间】：2013-12-13 22:54:21
【问题描述】：

我正在研究一种方法来触发嵌入的reveal.js 驱动的slid.es 演示文稿中的幻灯片进度。我有一个通过 iframe 嵌入本地版本幻灯片的父页面（与测试页面位于同一域）：

<iframe id="slidesdivlocal" src="slides-embed.html" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

在此设置中，我可以使用以下方法成功控制 iframe 中的显示 API：

document.getElementById("slidesdivlocal").contentWindow.Reveal.left();

我还希望能够控制来自外部 slid.es 域的 iframe 的嵌入式演示文稿，因为这使得嵌入变得更加容易。当我尝试这个时，我遇到了一个安全问题，因为父页面和 iframed 嵌入页面的来源不同：

Uncaught SecurityError: Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://slid.es". Protocols, domains, and ports must match.

This is an example 显示当通过按钮点击触发 left() 或 right() 时两种不同的嵌入会发生什么。

我看到有人建议 Cross-window messaging 解决这个问题，但我只能控制父页面，所以这不是一个真正的选择。

有没有办法通过 iframe 将 slide.es 演示文稿嵌入到他们的外部网站，并仍然通过他们的 Reveal API 方法控制它们？

【问题讨论】：

标签： iframe same-origin-policy reveal.js

【解决方案1】：

我已经对此进行了一些聊天，结果证明我实际上在这里要求不可能的事情。通过 iframe 从父页面控制在另一个域上运行的 JS API 而无需访问另一个域，这不是您可以做的事情，也不应该做。

我将连接到本地托管的 reveal.js 幻灯片，而不是与 slid.es 上托管的幻灯片

【讨论】：