Как найти тэг внутри IFRAME используя JQuery

JavaScript | 01.06.2016 | Метки:

IFRAMEКак-то мне понадобилось поместить на страницу некоторый IFRAME, который в свою очередь должен был нарисовать некоторую графику с использованием одного из jQuery-плагинов. И так как я давно не работал с jQuery эта простая задача заняла у меня довольное значительное время на исследования.

В IFRAME у меня находился код отдельной html-страницы, в секции head которой я использовал следующий код:

<script>
if (typeof($) === 'undefined') {
	$ = parent.$;
	jQuery = parent.jQuery;
}
</script>


В самом html-коде внутри IFRAME я пробовал с помощью стандартного подхода jQuery найти размещенный в нем же тег, вот так $(«#somedivid»), но вызов этой функции возвращал лишь e.fn.init[0], первый найденный ответ на эту тему (вольный перевод):

когда вы используете селектор в качестве параметра функции, вы создаете экземпляр функции jQuery при этом если jQuery нашел элемент на основе этого селектора, то он возвращает соответствующие элементы, но когда селектору не соответствует ни один элемент на странице он возвращает объект-прототип функции.

Пришлось опять заглянуть в гугол и найти эту страницу из оффициальной документации: https://api.jquery.com/contents/: «Метод .contents() также может быть использован для получения содержимого документа в IFRAME, если IFrame находится на том же домене, что и главная страница.»

Таким образом окончательный вариант был примерно таким:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contents demo</title>
</head>
<body>
 
<iframe width="80%" height="600" id="frameDemo">
<html>
<head>
<script>
  if (typeof($) === 'undefined') {
	$ = parent.$;
	jQuery = parent.jQuery;
  }
</script>
</head>
<body>
<div id="somedivid"></div>
<script>
$("#frameDemo").contents().find("#somedivid").css("background-color", "#BADA55");
</script>
</body>
</html>
</iframe>
 
</body>
</html>

Насколько я понимаю, вся эта ситуация произошла оттого, что я пытался использовать jQuery из «внешнего документа» для поиска тега во «внутреннем документе» (IFRAME), в связи с чем и понадобилось искать с помощью дополнительного метода, т.к. если я импортировал jQuery отдельно внутри IFRAME работал стандартный подход — $(«#somedivid»);

Если я понял эту простую ситуацию неправильно, то вы можете внести поправки в комментарии, буду благодарен.


Добавление комментария:

 css.php