2

I have an AngularJS application which runs under an iframe in a different website. I have the code of the website.
I need to open a new iframe to the same AngularJS application but to a different route. I don't want to load all the application again in the new iframe. I am looking for something that will duplicate existing instance of a window content, or maybe open a new iframe of the same application without loading the whole app again.
Here is the code explanation:
I have this html page:

<div>
   <iframe src="www.myapp.com/books"></iframe>
</div>

www.myapp.com/books is an AngularJS application so it loads a lot of dependencies, execute a lot of code and make a few backend calls. I want to add a button that it's click will open another iframe to the html page:

 <div>
   <iframe src="www.myapp.com/books"></iframe>
   <iframe src="www.myapp.com/names"></iframe>
</div>

The new iframe will open the same app but different route. Unfortunately this will cause a full loading of the application for the same iframe, and I am looking for a way to prevent this. Like cloning the same instance of the iframe and route to the new location without a full reload..

Any idea?

Naor
  • 23,465
  • 48
  • 152
  • 268

2 Answers2

0

Lets talk JQuery on this one.

Say you have your nice iframe (iframes aren't actually very nice) element

<iframe id="original" src="www.myapp.com/books"></iframe>

take note of the id tag.

then you got your javascript, enclosed in tags

var newIframe = $("#original").clone();

$("body").append(newIframe);

LINK ---> Check this all out at JSFiddle <--- LINK!

Mike
  • 874
  • 1
  • 8
  • 15
  • How would solve this the question? This returns the **URL** of the `iframe`. The OP wants to duplicate an iframe. – Cu3PO42 Jan 21 '14 at 21:17
  • @Mike, I need another iframe. Duplicate the environment of the first and create another one from it. – Naor Jan 21 '14 at 21:24
  • I read over the `"your url here"` part on my mobile, sorry. The mobile website is not exactly good, the scrolling of code sections is pretty screwed... Sorry, once again :) Anyway, I just had a look at the jQuery code on github and it seems to me it just sets the `src` attribute on the `iframe`. So wouldn't it be browser specific if it uses the cached version or reloads the resources? Alright, you changed your answer :D, but the `clone` method seems to do the same thing - leaving the actual behavior to the browser. – Cu3PO42 Jan 21 '14 at 21:29
  • I'm not entirely sure if postbacks are supposed to happen when an iframe's src is changed. I didn't think any browser did that by design, but I'll have to test. EDIT: I mean to say, I don't think the parent page is supposed to postback when its child iframe has a new source. (obviously the iframe has to postback to load the new page) – Mike Jan 21 '14 at 21:31
  • @Mike, If 'www.myapp.com/books' will have a javascript reference, it will run it once. Then, after cloning, the clone will run that javascript again! I want that JavaScript to run once. – Naor Jan 21 '14 at 22:16
0

The best thing to do is probably write the html/javascript/css of your application as text in the second iframe. You can get the contents of the first iframe

page=$("#iframe1")).contents().find("html").html();

and then set it to your second iframe

var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();

You may not want to do a full copy like this, but I think this is a starting point.

I think it's mandatory that your application resides on the same domain of the website hosting it, or this will fail for cross-domain scripting security reasons. You would have to change the design of the whole thing if so, since you cannot manipulate an iframe on a different domain.

Information taken from How to insert html in iframe and Getting the html content of an iframe using jQuery

EDIT

What you want is probably not iframes. You can load the javascript for your application once in the main webpage. Then that javascript should download (or create) html elements, and inject them into a div. Doing so, the javascript for your application can manage as many subframes you want. The downside is that you must probably change a lot your application: now it is designed to be loaded as a webpage, and should be rewritten to be a js that manages some divs putting content into them. I don't see another solution, unfortunately.

Community
  • 1
  • 1
p91paul
  • 1,104
  • 10
  • 26
  • The content of the iframe should be html+css+javascript (the full DOM), so there is a chance this approach will work. Testing is up to you, however. – p91paul Jan 21 '14 at 22:16
  • But I don't want the JavaScript to run again. It already run in the first iframe. I want to duplicate the whole environment and not only the DOM. – Naor Jan 21 '14 at 22:17
  • I've enlarged my answer. Short, the answer is that what you want cannot be done, or at least I cannot imagine any way to do it. Another solution would be inject custom content from the first to the second iframe: your application would be running only in the first, but displays content also in the second. It is almost equivalent to the solution written in the answer, requiring you to reengineer your code, which is probably not what you are looking for. – p91paul Jan 21 '14 at 23:41