Iframe content disappears when manipulating mootools

Question

I have a third-party library (mootools) that creates tabs, and I have a Google double click for publishers (dfp) creating ads. dfp creates ads in the iframe, then the script tabs capture one of the iframe mainframes and "messes" along with it to create the tabs. The contents of the iframe are lost in the process.

I'm looking for a way to handle this (I tried to launch the dfp stuff after loading the tabs, but then the Google scripts worked).

the iframe from another domain to the parent window, so anything that stuff for elements in the iframe is trying to do will fail.

addTab: function(text, title, content) { var grab = $(content); var container = (grab || new Element('div')) .setStyle('display', 'none') .addClass(this.options.classContainer); this.wrapper.adopt(container); var pos = this.tabs.length; var evt = (this.options.hover) ? 'mouseenter' : 'click'; var tab = { container: container, toggle: new Element('li').grab(new Element('a', { href: '#', title: title }).grab( new Element('span', {html: text}) )).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu) }; if (!grab && $type(content) == 'string') tab.url = content; this.tabs.push(tab); return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]); }, 

Answer 1

Whenever the iframe or its ancestor is disconnected from the DOM, the contents of the iframe will be cleared, and the iframe will reload when it or its ancestor steps back in again. This anonymous behavior occurs in Firefox and Webkit, but I think that iframes will not reboot in IE.

As a workaround, you will need to find a way to reorder your code so that the iframe is added only after the script tab is made in the container.

Chrome also has an option that causes the iframe to not reboot if you move it with acceptNode instead of apendChild, but I don't believe it is a cross browser.

see this similar question: How to move an iFrame to the DOM without losing state?