Removing Iframes

‹prev | My Chain | next›

One of the things about Three.js animations is that they can consume a fair bit of CPU. Even simple animations will add to CPU load—nothing terrible, but enough to annoy. So if I want to embed code samples in web pages and blog posts, I am going to need a way to pause them and possibly start them paused in the fashion of videos.

The code samples from the ICE Code Editor are normally full page edit sessions (code editing courtesy of the ACE code editor) with a backing iframe that contains the visualization layer:



When embedding this in a regular page, the code editor is shrunk to fit a block <div> tag with the backing iframe also shrunk accordingly:



Since the code in the visualization iframe can be anything, it would be difficult to get an animate() block to to pause reliably. I think that my best bet will be to disable the preview entirely after some timeout period.

Eventually, I find that this code will do the trick:

var embed_timeout;
var update = function () {
  if (EDIT_ONLY) return;

  var iframe;
  // find iframe here...

  clearTimeout(embed_timeout);
  if (embedded) {
    embed_timeout = setTimeout(
      function() {
        iframe.parentElement.removeChild(iframe);
      },
      6*1000
    );
  }
};

I had originally tried parent instead of parentElement, but found that I had confused elements with nodes yet again. Ah... the DOM.

Speaking of the DOM, I also need to find the iframe element with the frameElement attribute:

    iframe = frames[0].frameElement;

I had been working with just frames[0], but that lacks the parentElement property.

Anyhow, it is becoming readily apparent that I need to take a step back in this approach. I am more-or-less spiking different parts of what needs to come next with the ICE Code Editor, but what really needs to come next is a way to include multiple editors per-page. For that, I need to rework the API extensively due to the single page nature of the code. I will get started on that tomorrow.


Day #712