jQuery 将 iframe 中的元素附加到其主体父窗口。

Question

我有 elm.appendTo('#wrap');

其中 elm 是 iframe 内单击图像的 jquery 对象。我想将该图像附加到

中，其中 #wrap 是 iframe 外部页面正文中的 div。所以基本上当我双击 iframe 内的图像时，我希望该图像附加到 iframe 外部的 。正文和 iframe 链接都位于同一域中。

Answer 1

前提是该框架及其父框架位于同一域中。请参阅SOP

---

Execute either of the following lines from within the iframe (parent can be replaced by top, if the parent document is in the top window):

//If the parent document doesn't have JQuery:
elm.appendTo(parent.document.getElementById("wrap"));

//Only if JQuery is included at the parent
elm.appendTo(parent.$("#wrap"));
parent.$("#wrap").append(elm);

---

If you want to grab the element inside the frame, from the context of the parent, use either of the following:

假设 #elm 是您的图像的 ID。

// If JQuery is defined at the frame AND the parent (current document)
$("#wrap").append(frames[0].$("#elm"));
frames[0].$("#elm").appendTo($("#wrap"));

frames[0] 指当前文档中的第一帧。如果您在框架上设置了 name 属性，则还可以使用 frames.frame_name 或 frames["frame_name"]。

---

Final example: Adding a click event listener to the elm JQuery (image) object:

elm.click(function(){
    parent.$("#wrap").append(this);
})

Answer 2

尝试从另一种方式进行处理：从父窗口中找到要附加的元素，然后使用 .append() 并选择 iframe 中的元素。例如：

$("#wrap").append($("iframe #myElement"));