Iframe alternative

Question

So, I searched around and lost this topic a bit. People said that there are alternatives to iframes, but I don’t see anything suitable for calculating what I'm trying to do. In fact, I created a small game that uses videos and plays certain buttons based on input from the keyboard.

All this is in a separate html file, and I want to display it in another html file, which will be in the iframe state on another web page. But I cannot find an optimal approach to this.

the iframe is too slow, the game itself is working fine, but when I put it in the iframe, it lags like crazy half the time, or the material is not displayed because it is so slow.

Any ideas on where to start?

Answer 1

There is one alternative to the <iframe> and the <object> . It can also display content from various sources. The pro is that it complies with xhtml standards and is encouraged to use, but there is no such broad / useful support in older browsers (you need to mess with it to get it right in IE). It was used as follows:

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

This is a direct answer to your question, I don’t think it will give you any speed advantage. For the very reason that the <iframe> element is much more used and therefore more tested and taken care of than the <object> .

For myself, I have never seen an <iframe> cause a slowdown, but it is still possible. If this is an option, you should definitely try what ocanal said in the comments: let your script work with container-container-container instead of body-element and therefore embed it directly on the main page.

For a browser, it doesn't have to be much more than some of the overhead of processing a second document, so you can guess that it is a bit more to make your computer slow. Therefore, it might be a good idea to optimize the code as a whole:

• See if you can find a bottleneck causing a slowdown. Possible reasons may be

  • change the DOM a lot - it's always slow
  • acts a lot on things that are not even visible on the screen.

  • getting attributes from objects. For each additional period that you use, this means more work for your processor:

     // 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(); 

• Updating the game at short equal intervals to window.setTimeout() can also be too fast and unnecessary CPU power (or too slow and will not look great, but will never be right) - so you can use the new window.requestAnimationFrame . Variants with a vendor prefix are implemented in current versions of all important browsers, and it is easy to ensure the abandonment of the old method.
• As a final thought: Maybe this even helps in some metamagic way to include the script file itself on the main page, and not in the embedded document