Получение родительского iframe документа в jQuery

У меня есть страница с iframe, в которой есть html-документ. Мне нужно получить доступ к id iframe из этого дочернего документа, и мне не повезло с ним в jQuery. Существенная структура в моей странице:

<div id="ContainingDiv">
  <iframe id="ContainingiFrame">
   <html>
     <head></head>
     <body>
     </body>
   </html>
  </iframe>
</div>

В моем методе javascript я могу получить что-либо в тегах <body> с помощью селекторов jQuery, но не могу получить элемент iframe, чтобы изменить его размер. Я пробовал несколько вещей, но я, по общему признанию, не эксперт в jQuery DOM-навигации, особенно там, где задействованы iframe (iframe находится в том же домене, что и содержащая страница.) Есть ли способ, которым я могу это сделать?

Ответы

Ответ 1

Нет необходимости в jQuery. Чтобы получить объект body вашего родителя, вы можете сделать это:

var parentBody = window.parent.document.body

Если он находится в том же домене, что и ваш iframe, из которого вы запускаете код, после его использования вы можете использовать обычный javascript для этого объекта:

window.parent.document.getElementById("ContainingiFrame").style.height = "400px";

или с помощью jQuery:

$("#ContainingiFrame", parentBody).height("400");

Здесь статья об изменении размера iframe из iframe с образцом кода: http://www.pither.com/articles/2010/11/12/resize-iframe-from-within

И связанный вопрос/ответ об изменении размера iframe на его собственном контенте: Изменение размера iframe на основе контента

Ответ 2

Чтобы получить доступ к исходному документу из вашего iframe, вы можете добавить параметр к своим селекторам, по умолчанию это документ, но ничто не мешает вам изменить контекст на window.parent.document следующим образом:

$('#ContainingiFrame', window.parent.document).whatever();

Или добавьте его перед вашим селектором:

window.parent.$('#ContainingiFrame').whatever();

Ответ 3

Если у вас нет информации о iframe (например, идентификатор запроса), вы хотите использовать frameElement следующее окно:

var iframe_tag_in_parent_window = window.frameElement;

Теперь у вас есть тег iframe и он может работать с ним непосредственно в JavaScript.

Чтобы использовать jQuery вместо обычного JavaScript, вы используете следующее:

var iframe_in_jquery = jQuery(window.frameElement, window.parent.document);

Мы только что говорили о первой части (window.frameElement). Вторая часть - это контекст, в котором jQuery найдет элемент и обернет его. Это родительский документ нашего текущего окна.

Например, если у вас есть уникальный идентификатор в теге iframe, который вы можете сделать:

var iframe_in_jquery = jQuery(window.frameElement, window.parent.document),
    id = iframe_in_jquery.attr("id");

Теперь id является идентификатором, если работает iframe ваш JavaScript-код.

P.S. если window.frameElement равно null или undefined, то вы не находитесь в iframe.

P.P.S обратите внимание, что для запуска кода в родительском окне вам может потребоваться использовать родительский экземпляр jQuery(); это делается с помощью window.parent.jQuery(...). Это особенно верно, если вы пытаетесь выполнить trigger() событие!

P.P.P.S. убедитесь, что используете window.frameElement, а не только frameElement... некоторые браузеры несколько сломаны, и они не всегда смогут получить доступ к правильным данным, если они не полностью соответствуют требованиям (хотя в 2016 году эта проблема может быть решена?)

Ответ 4

Попробуйте следующее:

Изменить размер элемента внутри iframe:

$('#ContainingiFrame', window.parent.document).find('#someDiv').css('height', '200px');

Или просто измените размер iframe:

$('#ContainingiFrame', window.parent.document).height('640');

Ответ 5

Попробуйте следующее:

$("#ContainingiFrame").contents().find("#someDiv");