iframe 内容在被 mootools 操作时消失答案

【问题标题】：iframe contents disappear when manipulated by mootoolsiframe 内容在被 mootools 操作时消失
【发布时间】：2012-01-16 17:44:57
【问题描述】：

我有一个第三方 (mootools) 库创建标签，我有谷歌双击发布商 (dfp) 创建广告。 dfp 在 iframe 中创建广告，然后 tabs 脚本抓取 iframe 的锚点并与之“混淆”以创建标签。 iframe 的内容会在此过程中丢失。

我正在寻找一种解决方法（尝试在标签加载后触发 dfp 内容，但随后 google 脚本崩溃了）。

iframe 与父窗口来自不同的域，因此任何试图对 iframe 中的元素进行操作的东西都会失败。

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]);
},

【问题讨论】：

我假设 var grab = $(content); 是您的 iFrame 内容，对吧？跟踪代码时会发生什么？ “抓取”实际上是否包含预期的 iFrame 内容？如果是这样，当你单步执行你的函数时，它在哪里丢失了？

标签： javascript iframe mootools

【解决方案1】：

当 iframe 或其祖先与 DOM 断开连接时，iframe 的内容将被清除，并且当重新插入 iframe 或其祖先时，iframe 将重新加载。这种令人讨厌的行为发生在 Firefox 和 Webkit 中，但我认为 iframe 不会在 IE 上重新加载。

作为一种解决方法，您需要找到一种重新排序代码的方法，以便仅在标签脚本完成对容器的操作之后添加 iframe。

Chrome 显然也有一个选项，如果你使用采用节点而不是 apendChild 移动 iframe，它不会重新加载，但我不相信它是跨浏览器的。

有关更多信息，请参阅此类似问题：How to move an iFrame in the DOM without losing its state?

【讨论】：