Sandbox WebGL Plugin

Question

I am doing some work with Pipeline Pilot and noticed that all of the built in HTML components that do things, like collapsible panels, tabs, or anything else that presumably has some javascript that I can't access causes my otherwise working WebGL component to break on load.

Is there a way to "sandbox" or otherwise isolate a WebGL component for it's own protection? Weird question, and not the best way to look at it, but I can't change any of the code inside of the WebGL component, and I can't change any of the internal Pipeline Pilot code, so I need an inelegant solution of any kind.

Answer 1

What @David said, using an iframe would probably do what you want. In that vain you can detect if you're in an iframe with

var isInIFrame = function() {
  return window != window.top;
};

I use that the change my CSS depending on if I'm in an iframe or not

var updateCSSIfInIFrame = function() {
  if (isInIFrame()) {
    document.body.className = "iframe";
  }
};

Then I can use CSS to change formatting. eg:

/* only applies if in an iframe assuming the function above was called. */
body.iframe {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.iframe>canvas {
  width: 100%;
  height: 100%;
}

Answer 2

To be honest, I have trouble comprehending your exact question, however if you want to sandbox html the go to place to go to is the <iframe> in combination with an external domain. By hosting the relevant things on a different domain the cross domain policy kicks in fully sandboxing the two environments. Another option is using the sandbox attribute of the <iframe> tag in HTML5, but as it's not fully supported yet I would not actually advise that.