iframe的替代方案

Question

所以我一直在环顾四周,对这个话题有点失落.人们已经说过iframe的替代方案,但我认为没有任何东西适合我正在努力做的事情.我基本上创建了一个小型游戏,它使用视频并根据键盘输入的相应按钮播放特定的视频.

所有这些都在一个单独的html文件中,我希望将它显示在不同的html文件中,以便在不同的网页上处于iframe状态.但我似乎无法找到解决这个问题的最佳方法.

iframe太慢了,游戏本身运行得很好,但是当我把它放在iframe中时,它会像疯了一半时间滞后,或者因为速度太慢而无法渲染.

任何从哪里开始的想法？

Answer 1

有一个替代品<iframe>,那就是<object>标签.它也可以显示来自不同来源的内容.专家是它符合xhtml标准并鼓励使用,但在旧版浏览器中没有这么广泛/可用的支持(你必须弄乱它才能在IE中正确使用它).它的用法如下:

<object data="page.html" width="400" height="300" type="text/html">
    Alternative Content
</object>

这是对你的直接回答问题,我认为它不会给你任何速度优势.已经因为<iframe>元素使用得多,而且经过了更多的测试和照顾<object>.

我对自己从来没有看到<iframe>过导致经济放缓的原因,但这仍然是可能的.如果这是一个选项,你绝对应该在评论中尝试ocanal之前所说的:让你的脚本使用包装器container-div而不是body-element,然后将它直接嵌入到主页上.

对于浏览器来说,它不应该只是处理第二个文档的一些开销,所以你可以猜测,让你的电脑运行速度慢一点.因此,通常优化代码可能是个好主意:

看看你是否能找到导致经济放缓的瓶颈.可能的原因可能是
- 改变DOM很多 - 这总是很慢
- 对屏幕上甚至不可见的事情采取很多行动
- 从对象获取属性.对于你使用它的每一个额外的时间段意味着更多的工作为您的CPU:
```
// instead of using this over and over again
house.roof.window.handle.open();
house.roof.window.handle.close();

// save it to a var and use that instead
var handle = house.roof.window.handle;
handle.open();
handle.close();
```
  Run Code Online (Sandbox Code Playgroud)
以相等的间隔更新游戏window.setTimeout()也可能太快并且不必要地浪费CPU功率(或者太慢而且看起来不会很好,但从来没有真正正确) - 所以你可以使用新的window.requestAnimationFrame.以供应商为前缀的变体在所有重要浏览器的当前版本中实现,并且很容易为旧方法提供后备.
作为最后一个想法:也许它甚至有助于以某种神奇的方式将脚本文件本身包含在主页上而不是嵌入文档中