JQuery Добавить элемент из iframe в его родительское окно body.

У меня есть elm.appendTo('#wrap');

где elm - объект jquery щелкнутого изображения внутри iframe. Я хочу добавить это изображение в <div id="wrap">, где #wrap является div в теле страницы вне iframe. Поэтому в основном, когда я дважды нажимаю на изображение внутри iframe, я хочу, чтобы это изображение добавлялось к <body> за пределами iframe. И тело, и ссылка iframe находятся в одном домене.

Ответ 1

При условии, что кадр и его родитель находятся в одном домене. См. SOP

Выполните одну из следующих строк из внутри iframe (parent можно заменить на top, если родительский документ находится в верхнем окне):

//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);

Если вы хотите захватить элемент внутри фрейма, из контекста parent используйте одно из следующих действий:

Предположим, что #elm является идентификатором вашего изображения.

// 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"].

Последний пример: добавление прослушивателя событий click к объекту elm JQuery (image):

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

Ответ 2

Попробуйте использовать это с другого пути: из родительского окна найдите элемент, который хотите добавить, а затем используйте .append() и выберите элемент в iframe. Например:

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