Вложенные рамки iframe
Используя jQuery, я пытаюсь получить доступ к div id="element".
<body>
<iframe id="uploads">
<iframe>
<div id="element">...</div>
</iframe>
</iframe>
</body>
Все iframes находятся в одном домене без проблем с www / non-www.
Я успешно выбрал элементы в первом iframe, но не во втором вложенном iframe.
Я попробовал несколько вещей, это самая последняя (и довольно отчаянная попытка).
var iframe = jQuery('#upload').contents();
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');
// iframeContent is null
Редактировать: чтобы исключить проблему синхронизации, я использовал событие щелчка и некоторое время ждал.
jQuery().click(function(){
var iframe = jQuery('#upload').contents().find('iframe');
console.log(iframe.find('#element')); // [] null
});
Есть идеи? Благодарю.
Обновление: я могу выбрать второй iframe так...
var iframe = jQuery('#upload').contents().find('iframe');
Теперь проблема заключается в том, что src пуст, поскольку iframe генерируется с помощью javascript. Таким образом, iframe выбран, но длина контента равна 0.
8 ответов
Дело в том, что предоставленный вами код не будет работать, потому что <iframe>
Элемент должен иметь свойство "src", например:
<iframe id="uploads" src="http://domain/page.html"></iframe>
Это нормально использовать .contents()
чтобы получить контент:
$('#uploads).contents()
даст вам доступ ко второму iframe, но если этот iframe "INSIDE", http://domain/page.html
задокументируйте загруженный iframe #uploads.
Чтобы проверить, прав ли я в этом, я создал 3 html-файла с именами main.html, iframe.html и noframe.html, а затем выбрал элемент div# с помощью:
$('#uploads').contents().find('iframe').contents().find('#element');
Будет задержка, при которой элемент будет недоступен, так как вам нужно подождать, пока iframe загрузит ресурс. Кроме того, все iframes должны быть в одном домене.
Надеюсь это поможет...
Вот HTML для 3 файлов, которые я использовал (замените атрибуты "src" на ваш домен и URL):
main.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>main.html example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // nothing at first
setTimeout( function () {
console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // wait and you'll have it
}, 2000 );
});
</script>
</head>
<body>
<iframe id="uploads" src="http://192.168.1.70/test/iframe.html"></iframe>
</body>
iframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>iframe.html example</title>
</head>
<body>
<iframe src="http://192.168.1.70/test/noframe.html"></iframe>
</body>
noframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>noframe.html example</title>
</head>
<body>
<div id="element">some content</div>
</body>
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');
iframeInner содержит элементы из
<div id="element">other markup goes here</div>
и iframeContent найдет для элементов, которые находятся внутри
<div id="element">other markup goes here</div>
(find не выполняет поиск по текущему элементу), поэтому он возвращает ноль.
Эй, у меня есть кое-что, что, кажется, делает то, что ты хочешь сделать. Это включает в себя некоторое грязное копирование, но работает. Вы можете найти рабочий код здесь
Итак, вот основной HTML-файл:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Iframe = $('#frame1');
Iframe.on('load', function(){
IframeInner = Iframe.contents().find('iframe');
IframeInnerClone = IframeInner.clone();
IframeInnerClone.insertAfter($('#insertIframeAfter')).css({display:'none'});
IframeInnerClone.on('load', function(){
IframeContents = IframeInner.contents();
YourNestedEl = IframeContents.find('div');
$('<div>Yeepi! I can even insert stuff!</div>').insertAfter(YourNestedEl)
});
});
});
</script>
</head>
<body>
<div id="insertIframeAfter">Hello!!!!</div>
<iframe id="frame1" src="Test_Iframe.html">
</iframe>
</body>
</html>
Как видите, после загрузки первого Iframe я получаю второй и клонирую его. Затем я снова вставляю его в dom, чтобы получить доступ к событию onload. После того, как этот загружен, я извлекаю контент из не клонированного (должно быть также загружено, так как они используют один и тот же src). Затем вы можете делать то, что вы хотите с контентом.
Вот файл Test_Iframe.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Test_Iframe</div>
<iframe src="Test_Iframe2.html">
</iframe>
</body>
</html>
и файл Test_Iframe2.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>I am the second nested iframe</div>
</body>
</html>
Вы должны использовать живой метод для элементов, которые отображаются позже, таких как colorbox, скрытые поля или iframe
$(".inverter-value").live("change",function() {
elem = this
$.ajax({
url: '/main/invertor_attribute/',
type: 'POST',
aysnc: false,
data: {id: $(this).val() },
success: function(data){
// code
},
dataType: 'html'
});
});
У вас, вероятно, есть проблема со временем. Возможно, ваш документ document.ready рекомендует до того, как будет загружен второй iFrame. У вас недостаточно информации, чтобы помочь гораздо дальше - но дайте нам знать, если это кажется возможной проблемой.
Я полагаю, ваша проблема в том, что jQuery не загружается в ваши фреймы.
Самый безопасный подход - полагаться на чистые DOM-методы для анализа вашего контента.
Или же, начните с jQuery, а затем один раз внутри ваших фреймов, проверьте один раз, если typeof window.jQuery == 'undefined'
, если это правда, jQuery не включен внутри него и откат на DOM-метод.
Если браузер поддерживает iframe, то DOM внутри iframe происходит из атрибута src соответствующего тега. Содержимое, находящееся внутри тега iframe, используется в качестве резервного механизма, когда браузер не поддерживает тег iframe.
Я думаю, что лучший способ достичь вашего div:
var your_element=$('iframe#uploads').children('iframe').children('div#element');
Это должно работать хорошо.