iframe contents disappear when manipulated by mootools

Question

I've got a third party (mootools) library creating tabs and I've got google double click for publishers (dfp) creating ads. dfp creates the ads in an iframe then the tabs script grabs an anchestor of the iframe and 'messes' with it to create the tabs. The contents of the iframe gets lost in the process.

I'm looking for a way of coping with this (tried firing the dfp stuff after the tabs had loaded but then the google scripts crashed).

The iframe is from a different domain to the parent window so anything which tries to do stuff to elements within the iframe is going to 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]);
},

I'm assuming `var grab = $(content);` is your iFrame content, right? What happens when you trace through your code? Does "grab" actually contain the iFrame content as expected? If so, as you step through your function, where does it get lost? — Bob FiveThousand, Apr 10 '12 at 13:53

score 1 · Accepted Answer · edited May 23 '17 at 10:09

Whenever an iframe or an ancestor of it are disconnected from the DOM, the iframe's contents will be cleared and the iframe will reload when it or its ancestor is reinserted back. This anoying behaviour occurs in Firefox and Webkit, but I think the iframes won't reload on IE.

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

Chrome also apparently has an option that causes the iframe to not reload if you move it with adoptNode instead of apendChild but I do not believe it is cross-browser.

for more, see this similar question: How to move an iFrame in the DOM without losing its state?

iframe contents disappear when manipulated by mootools

1 Answers1