Javascript 替代 iframe

Alternative to iframe

提问by Feng Huo

So I've been looking around and am a bit lost on this topic. People have said that there's alternatives to iframes, but I don't see any that fit the bill for what I'm trying to do. I essentially created a small game that uses videos and plays particular ones based on corret button input from the keyboard.

所以我一直在环顾四周，对这个话题有点迷茫。人们说 iframe 有替代品，但我没有看到任何适合我正在尝试做的事情。我基本上创建了一个小游戏，它使用视频并根据键盘输入的正确按钮播放特定的视频。

All of that is in a seperate html file, and I want to display it on a different html file to be in an iframe like state on a different webpage. But I can't seem to figure out the best approach to this.

所有这些都在一个单独的 html 文件中，我想将它显示在不同的 html 文件中，以在不同网页上处于类似 iframe 的状态。但我似乎无法找出解决此问题的最佳方法。

The iframe is just too slow, the game itself runs fine, but when I put it in an iframe it lags like crazy half the time, or stuff doesn't render because it's going so slowly.

iframe 太慢了，游戏本身运行良好，但是当我将它放入 iframe 时，它​​有一半时间会像疯了一样滞后，或者因为运行速度太慢而无法渲染。

Any ideas of where to start?

关于从哪里开始的任何想法？

回答by V02460

There is one alternative to <iframe>and that's the <object>tag. It can display content from different sources as well. The pro is it being conform to the xhtml-standards and encouraged to use but there's not such a broad / usable support in older browsers (you have to mess with it to get it right in IE). It's used as followed:

有一种替代方法<iframe>，那就是<object>标签。它也可以显示来自不同来源的内容。优点是它符合 xhtml 标准并鼓励使用，但在旧浏览器中没有如此广泛/可用的支持（你必须弄乱它才能在 IE 中正确使用）。它的用法如下：

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

That being the direct answer to you question I don't think it will give you any speed advantage. Already for the reason that the <iframe>-element is much more used and so more tested and cared for than <object>.

这是对您问题的直接回答，我认为它不会给您带来任何速度优势。已经因为<iframe>-element 比<object>.

I for myself never saw an <iframe>being the cause for a slowdown, but that still might be possible. If that is an option, you should definitely try what ocanalsaid before in the comments: Let your script work on an wrapper container-div instead of the body-element and so embed it directly on the mainpage.

就我自己而言，我从未认为存在<iframe>是导致放缓的原因，但这仍然是可能的。如果这是一个选项，您绝对应该尝试ocanal之前在评论中所说的内容：让您的脚本在包装容器 div 上工作，而不是在 body-element 上工作，因此将其直接嵌入到主页上。

For the browser it shouldn't be much more than some overhead from handling a second document, so you could guess that it's just that little more to make your pc run slow. So it might be a good idea to optimize the code in general:

对于浏览器来说，处理第二个文档的开销不应该超过一些，因此您可能会猜测，这只是让您的电脑运行缓慢而已。因此，通常优化代码可能是一个好主意：

1. Look if you can find the bottleneck causing the slowdown. Possible causes could be

   • altering the DOM a lot - which is always slow
   • acting a lot on things not even visible on screen

   • getting attributes from objects. For every additional period you use it means more work for your 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();
     

2. Updating the game in short equal intervals by window.setTimeout()may also be too fast and waste cpu power unnecessarily (or too slow and won't look fine then, but never really right) - so you can use the new window.requestAnimationFrame. The vendor-prefixed variants are implemented in the current versions of all important browsers and it's easy to provide a fallback to the old method.
3. As a last thought: Maybe it even helps in some meta-magical way to include the script file itself on the mainpage and not in the embeded document

1. 看看你是否能找到导致速度变慢的瓶颈。可能的原因可能是

   • 大量改变 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();
     

2. 以相同的短间隔更新游戏window.setTimeout()也可能太快并不必要地浪费 CPU 功率（或者太慢并且看起来不太好，但永远不会真正正确）-因此您可以使用新的window.requestAnimationFrame. 供应商前缀的变体在所有重要浏览器的当前版本中都实现了，并且很容易提供对旧方法的回退。
3. 最后一个想法：也许它甚至可以通过某种超神奇的方式将脚本文件本身包含在主页上而不是嵌入文档中