Render app into iframe

Proposals
1

Hello, now my app render to rootElement: ‘#’ + clvr.rootElement, where rootElement = ‘lunchbox-container’, in sum app render to div with id=“#lunchbox-container’”, whether it is possible to make an application loaded into iframe, so it would look like

    <iframe id="container" src="">
         <div id="lunchbox-container">
             <!--Ember APP -->
         </div>
    </iframe>
2

Why do you want to do this?

3

Good chance that this won’t work. Ember relies on jQuery, and jQuery doesn’t work normally when dealing with content inside iframes. Put the code that you have above in an HTML file, then run $('#lunchbox-container') and you won’t get back any results.

EDIT: I forgot that yesterday I changed my app to having a root element. I changed it to being inside of an iframe and got exactly what I described above: it couldn’t find the DOM element. Even if you could get it to work somehow, it would likely be a very fragile hack. Find another way to do what you want the iframe for.

4

Load an external CSS for a specific DIV, I insert my application to another site

5

When you say insert into another site, do you mean that you’re loading the entire app inside of the iframe? As in, all scripts and resources are loaded on the other site inside the iframe? Then yes, I would expect that to work. That’s exactly what iframes are for. However, if you’re loading your Ember.js scripts outside of the iframe, but trying to render inside of it, that is not going to work (which is what I said above).

6

I believe that not interacting with content inside of an iframe is actually a security implementation in all browsers. To communicate with content inside of an iframe you need special messaging mechanism that is aware of the communication from both inside and outside the iframe.

I’m still curious what use case for this is.

7

Possible Use Case: Running my QUnit tests inside of an iFrame to keep the styling of the QUnit runner from interfering with the App styling. I was looking at Unit testing jQuery w/ QUnit | Matt Evanoff and http://naheece.wordpress.com/2012/12/15/qunit-acceptance-test-framework-with-iframe-require-js-and-jquery-simulate/

8

Unless you have elements whose names begin with qunit, Qunit’s styling definitely will not affect yours. The other way around may happen (and it does for me), but I would hardly consider that a good reason to use an iframe like this.

9

Thanks for the feedback! I’m sticking to a div for now. I do share the world’s hatred for iFrames too. Don’t get me wrong I just didn’t want the QUnit stuff to have any side-effects into my tests.

10

I actually have a use case. I’m building a WYSIWYG editor and need a “preview” div. If that div could instead be an iframe, its CSS could be isolated from the designer’s.

But, I’m pretty sure this is impossible because an iframe has its own scope which is completely separate from the main runtime.

There is a library that lets you communicate across iframes using message-passing: https://github.com/tildeio/oasis.js

1 Like
11

Another use case I’m tinkering with the idea of trying to replicate Sencha’s sandbox-container concept as an ember component.