iframe reloads after moving tabs

[natcohen]

I've put an iframe inside a tab and each time I move the tab, it reloads my iframe!

In addition, the drag doesn't work when the mouse goes over the iframe.

I created a plunker. For the first problem, just go to 'more information' and then move the tab. For the second problem, try to move the tab over the iframe.

http://plnkr.co/edit/tN94U03VaTDa64gSG8v0?p=preview

BTW, I also noticed that the proxy is not an image and if you go fast with the mouse on the bottom/right, you can manipulate the proxy (click on links or scroll). Wouldn't it be optimal to use an image of the page instead of the page itself?

[deepstreamIO]

Hi @natcohen

As mentioned in my previous answer, iFrames are definitely not the solution to your problem. They are effectively completely new browser windows, even though they don't look that way. All events, including mouse-movement above them relate to the window within, so GoldenLayout doesn't have a chance to know about them.

And yes, they do reload your app when you move them somewhere else.

There are two tutorials (here and here) that explain how to bootstrap individual Angular applications within GoldenLayout containers - even when using Angular UI.

In order to constrain a bootstrap modal within it's container, adding

.lm_content{
  position: relative;
}

body .modal{
  position: absolute;
}

is not exactly a "workaround", it's how you solve it.

[natcohen]

Hi @hoxton-one,

I'm very disappointed by this answer which clearly doesn't address any of the issues. Why do you relate this problem to modals? Why wouldn't you support iframe within a tab? FYI the problem related to the mouse not being responsive over an iframe could be addressed by putting a transparent layer over the entire content exactly the same way the drag container works!

For the reload you don't give more details on why they reload so I can't really say if it's possible to solve this...

FYI I'm working on a node-webkit project (where tabs are not supported). My goal is to simulate these tabs so it looks like a web browser. Therefore it makes total sense to use iframe as each tab is completely separated from the other. Golden layout is a great project and I'm sorry to see that there is no room for improvement. Even if it's not its initial goal, I really think the project could benefit from these fixes.

[deepstreamIO]

Hi @natcohen

fair enough :-).I'm curious: What exactly is the problem that you're trying to solve by using iFrames?

[deepstreamIO]

As to the iFrames reloading: iFrames reload whenever they are moved within the DOM structure. Please see this post http://stackoverflow.com/questions/7434230/how-to-prevent-an-iframe-from-reloading-when-moving-it-in-the-dom

This guys answer would be valid:

"you need to save the 'Html' node under the iframe and after you moved the iframe, add it back" (by which he means the content document) , but I'm still curious about the previous question :-)

[natcohen]

Hi @hoxton-one

I really want to create a way to use tab within node-WebKit which will be compatible with everything...(modal included)

These two problems are the major ones I've encountered so far

• Reload of tabs (I didn't look deep into golden layout code to see if it will be possible to fix that, but looking at the stackoverflow, it doesn't look trivial to me). I will try the solution you've mentioned though. However I'm not sure how to proceed. How can I know a tab is going to be dragged?
• the drag-drop which should be very easy to fix as the drag container already works that way...

I succeeded to have a pretty good result by modifying the theme only.

[deepstreamIO]

Ok, but please help me understand why you need iFrames for this. If you take them out of the equation all your problems will be gone

[natcohen]

@hoxton-one

Without them, I've encoutered other issues than the modals. If you open two tabs with the same applications and broadcast messages, there could be some troubles. Same for $rootscope variables. I didn't test all the cases but it seems to me way more logical to use iframes as they are naturally separated exactly the same way a web browser works! I don't think I can get something reliable without that.

PS Will you re-open the issue? BTW does golden-layout move the iframe in the dom or is it just a css change?

[natcohen]

@hoxton-one

Will you reconsider the problem?

Best

[deepstreamIO]

Hi @natcohen,

I understand that this is a frustrating answer, but I'm afraid I won't consider the issue as a priority.I know that iFrames seem like a way to isolate parts of your app, but there are good reasons why people have stopped using them for these purposes and switched to using app frameworks like Angular instead.

I can guarantee you that you will encounter numerous issues when you try to structure your Angular application using iFrames, especially around inter-component messaging, ui-routing, CSS re-use, shared services etc.

iFrames have their place when it comes to embedding third party content, e.g. Codepens into your page, but using them for your case is a hack that will make your life way harder.

I agree that it would be possible to layer an element over the iFrame to capture mouse move events, but stopping them from reloading when moved in the DOM - which this issue is about - won't be possible.

I'd strongly recommend that you consider re-architecting your app to work natively, I worked on many large Angular apps and I can promise that it will be perfectly possible and less of a headache to build it without any iFrames involved.

Best

Wolfram

[natcohen]

Thanks @hoxton-one

I understand your point and agree with the idea of communication between tab (iframes in my case). However, in this case, the iframes are and must remain totally independent (remember I'm trying to emulate the tabs of a web browser for node-webkit). Therefore, iframes are the natural way to do it.

I get that the reload will remain an issue but in the meantime, wouldn't you agree to add the transparent over layer so at least tabs (and the splitter) can be moved? This would really help and shouldn't take long to implement... I will work on my side on the reload part and hopefully will find something. (BTW do you send any event right before dragging so I could prevent the iframe frame reloading?)

Again, I understand your opinion but in this particular case, it really makes sense to use iframes as they are not supposed to communicate one to the other. I would really appreciate that you consider iframes as an issue (not urgent but still an issue) as it should be possible to implement codepen (for example but other services as well).

[deepstreamIO]

You can globally listen to drag start and stop events as follows. This can also be used to show and hide the overlay that you're after - just stick a div in between the dragged window and the layout.

var showOverlay = function() {
    console.log( 'showOverlay' );
};

var hideOverlay = function() {
    console.log( 'hideOverlay' );
};

myLayout.on( 'tabCreated', function( tab ){
    tab._dragListener.on( 'dragStart', function(){ 
        showOverlay();  
    });

    tab._dragListener.on( 'dragStop', function(){ 
        hideOverlay();  
    });
});

Out of curiosities sake, what is the app that you're working on?

[natcohen]

@hoxton-one

Sorry for the late response... Basically, my project is a nodejs-expressjs-pouchdb-angularjs webapp. I developed it with node-webkit in mind but didn't realize that it doesn't support tabs (nwjs/nw.js#242). The tab system is a way for me to open my app with only one server, in the same window. I've spent two days to try to implement golden-layout without iframe but I ran into many issues (the modal issue is only the visible tip of the iceberg). As soon as I decided to use iframes, I got the result I wanted (except the issue you already know)...

Thank you for the listener, I succeded to add the overlay. What about the listener of the splitter? I have the same issue and would like to add the overlay.

BTW do you have any listener before you move the tab inside the DOM so I can copy it to prevent a reload of my iframe?

Thanks again for the effort!

[natcohen]

@hoxton-one
Hey, I have some implementation questions, where can I ask them? I tried this nfo@golden-layout.com, but never got an answer...

Thanks

[tylerjatwood]

@hoxton-one
I'm trying to use Golden Layout within tabs on an app that uses Angular routing. The problem is that Golden Layout needs to initialize before Angular, and the Angular routes (which have the GL containers) aren't initialized until after Angular initializes. If I initialize Golden Layout first, I get Error: GoldenLayout container not found when it tries to initialize. If I initialize Angular first, Golden Layout doesn't respond properly to events and page resize. What do you suggest for apps built with Angular routes?

Thanks

[zygimantas]

I am also using iframes to create sandbox for the 3rd party widgets and I had the same issues while dragging tabs. I have solved it by using the code provided "hoxton-one commented on Feb 3" post, but instead of creating the overlay, I set $('iframe').css('pointer-events', 'none') and $('iframe').css('pointer-events', 'auto'). I guess it might not be working in older browsers, but that's also might be an option for you.

By the way, I missed the "tabDestroyed" event.