Highslide：全屏无法在 iframe 中工作答案

【问题标题】：Highslide: fullscreen not working in an iframeHighslide：全屏无法在 iframe 中工作
【发布时间】：2013-03-09 13:40:18
【问题描述】：

我正在 wordpress 下建立一个网站，我正在使用 highslide 在 iframe 中显示 Flash 视频播放器。

该播放器通常可以通过单击专用按钮进入全屏模式，但由于它是在 Away3D 中开发的，因此全屏无法与 Google Chrome 一起使用（已知错误）：它会变为空白。

这就是为什么我必须在加载播放器的页面上使用脚本通过谷歌全屏 API 进入全屏状态。

您可以在以下测试站点上查看示例（由于我现在离线工作，所以我专门为您编造了这些示例）：

http://ipgtest.co.nf

第一个 ipad 图像只是加载了一个经典的幻灯片：它工作得很好。
第二个 ipad 图像单独加载 flash 播放器加载器页面，您会看到播放器上的全屏按钮（箭头）在 google chrome 和其他所有浏览器上都能完美运行。
第三个 ipad 图像在 highslide 的 iframe 中加载 Flash 播放器加载器页面，您会发现全屏按钮在 Google Chrome 上根本不起作用...

欢迎阅读http://ipgtest.co.nf/play/index.html的源码，看看chrome全屏是如何正常处理的。

非常感谢您的帮助，我真的很想找到解决方案...

朱利安

【问题讨论】：

您确定您用于在 Google Chrome 中全屏显示的脚本适用于 iframe 吗？我在 Highslide iframe 弹出窗口中使用 Chrome 中的全屏按钮得到的结果与将您的页面放入常规 iframe 时的结果相同：<iframe src="http://ipgtest.co.nf/play/index.html" width="765" height="546"></iframe>
嗯，你是对的，我使用的是 THREEx，它不能在 iframe 中工作，但是通过添加“allowfullscreen webkitallowfullscreen mozallowfullscreen width="xxx" height="yyy" frameborder=" 0">" 在一个普通的 iframe 上，我添加了一个测试 iframe（你可以在网站上看到它），它在 iframe 内工作，但它仍然不能在 Highslide 内工作，因为 iframe 的调用方式不同......我不不知道如何包含额外的 scipts 以允许全屏...你有什么线索吗？非常感谢！

标签： flash iframe fullscreen away3d highslide

【解决方案1】：

基于上面的 Juliens latest comment 以及通过将 allowfullscreen webkitallowfullscreen mozallowfullscreen 添加到 iframe 的代码中的技巧的信息，唯一的解决方案是将相同的代码添加到在 highslide-full.js 文件中创建 iframe 的代码中（或 highslide-with-html.js 文件 - 这取决于您使用的 Highslide 文件）。

在文本编辑器（不是 Word 或类似编辑器）中打开 Highslide js 文件并找到以下行：
（highslide-full.js 中的第 1668 行 - highslide-with-html.js 中的第 1435 行 /都是4.1.13版本，后续版本行号可能会改变）

this.body.innerHTML += '<iframe name="hs'+ (new Date()).getTime() +'" frameborder="0" key="'+ this.key +'" '

将行改为：

this.body.innerHTML += '<iframe allowfullscreen webkitallowfullscreen mozallowfullscreen name="hs'+ (new Date()).getTime() +'" frameborder="0" key="'+ this.key +'" '

【讨论】：