iframe 上的持久变量？

Question

我有一个动态创建的<div>，它包含一个<iframe>。 <iframe> 可能会自行关闭，此时 <div> 会被移除。

到目前为止我有：

var div = document.createElement('div'), ifr = document.createElement('iframe');
// some styles and stuff here, including ifr.src
ifr.contentWindow.container = div; // Note that domains are the same

// within the iframe's code, possibly a "close" link or after completing an operation
container.parentNode.removeChild(container);

它有效。但前提是 iframe 中的页面是开始时的页面。如果单击链接到另一个页面，则不再定义 window.container。

我知道我可以使用window.name 将数据持久存储到窗口，但它仅限于可以序列化的数据。据我所知，除了为它分配一个 ID 并存储它之外，你不能序列化一个 DOM 节点。我想避免这种任意的 ID，所以如果有人能提出更好的解决方案，我将不胜感激。

Answer 1

使用此代码：

//At the frame:
var parentFrames = parent.document.getElementsByTagName("iframe");
for(var i=parentFrames.length-1; i>=0; i--){
    if(parentFrames[i].contentWindow == window) {
        parentFrames[i].parentNode.removeChild(parentFrames[i]); //Removes frame
        //Add an extra `.parent` at each side of the expression to remove the `div`.
        break;
    }
}

Answer 2

加载到<iframe> 的页面可以使用“window.parent”来访问包含页面。因此，与其在<iframe> 中保留一些“神奇”引用，不如将其保留在包含页面上并让“子”页面查找它。

  function closeMe() { // inside the iframe page
    window.parent.frameContainer.removeChild(window.parent.removableFrame);
  }

除了“parent”之外，“window”的“top”属性在有一系列窗口（框架）长于一个步骤时引用最顶层的上下文（因此，@987654325 中的 <iframe> @ 等）。