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

#jquery #iframe #append

#jquery #iframe #добавить

Вопрос:

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

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

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

Предположим #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);
})

1. Я хочу добавить к #wrap внутри body, а не к body

2. Добавление объекта к элементу не перезаписывает содержимое контейнера. Просто настройте селектор (как показано в ответе) в соответствии с вашими пожеланиями.

3. Вопрос ясен. У меня есть <body><div id=»wrap»><iframe></body> Я хочу добавить изображение из iframe в #wrap

4. Вы определены elm как объект jQuery <img> элемента. Код, который я показал в своем ответе, должен вызываться из фрейма. parent.$("body") ссылается на родительский <body> элемент.

5. На самом деле я вызываю код добавления извне iframe. Возможно ли это

Ответ №2:

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

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

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

2. как я могу использовать elm объект jQuery вместо #myElement, как вы предложили. elm — это объект jQuery изображения, $('<img src=...>')

3. Просто замените селектор на .append() него: $("#wrap").append(elm);

4. Этот код не имеет смысла. $("iframe #myElement") выбирает элемент, идентифицированный #myElement внутри iframe тега. Селекторы не ищут элементы внутри фрейма.

5. Этот код имеет смысл. Я подхожу к проблеме из родительского фрейма. В родительском фрейме найдите элемент, к которому вы хотите добавить ( $("#wrap) ), затем добавьте содержимое, которое находится внутри вашего iframe ( .append() ) . Я просто подхожу к проблеме под другим углом (сверху вниз, а не снизу вверх).