JQuery, выберите элемент внутри iframe, который находится внутри iframe

Используя jQuery, я пытаюсь получить доступ к div id = "element".

<body>
    <iframe id="uploads">
        <iframe>
            <div id="element">...</div>
        </iframe>
    </iframe>
</body>

Все iframe находятся в одном домене без проблем 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

Изменить: Чтобы исключить проблему синхронизации, я использовал событие click и некоторое время ждал.

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.

Действительно застрял.

Ответы

Ответ 1

Вещь, код, который вы предоставили, не будет работать, потому что элемент <iframe> должен иметь свойство "src", например:

<iframe id="uploads" src="http://domain/page.html"></iframe>

Хорошо использовать .contents() для получения контента:

$('#uploads).contents() предоставит вам доступ ко второму iframe, но если этот iframe является "INSIDE" документом http://domain/page.html, загружается ifuploads iframe.

Чтобы проверить, насколько я прав, я создал 3 html файла с именами main.html, iframe.html и noframe.html, а затем выбрал элемент div # просто отлично:

$('#uploads').contents().find('iframe').contents().find('#element');

Там будет задержка, в которой элемент будет недоступен, так как вам нужно дождаться, когда iframe загрузит ресурс. Кроме того, все iframe должны находиться в одном домене.

Надеюсь, что это поможет...

Здесь приведен html для трех файлов, которые я использовал (замените атрибуты 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>

Ответ 2

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 не выполняет поиск по текущему элементу), почему он возвращает null.

Ответ 3

Эй, у меня есть кое-что, что, кажется, делает то, что вы хотите. Это связано с грязным копированием, но работает. Здесь вы можете найти рабочий код

Итак, вот главный файл 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>

Ответ 4

Вероятно, у вас проблема с синхронизацией. Ваш document.ready commend, вероятно, срабатывает перед загрузкой второго iFrame. У вас недостаточно информации, чтобы помочь гораздо дальше, но сообщите нам, если это похоже на возможную проблему.

Ответ 5

Вы должны использовать живой метод для элементов, которые отображаются позже, например 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'
    });
  });

Ответ 6

Я думаю, что лучший способ добраться до вашего div:

var your_element=$('iframe#uploads').children('iframe').children('div#element');

Он должен хорошо работать.

Ответ 7

Если браузер поддерживает iframe, то DOM внутри iframe поступает из атрибута src соответствующего тега. Содержимое, которое находится внутри тега iframe, используется в качестве механизма возврата, когда браузер не поддерживает тег iframe.

Ссылка: http://www.w3schools.com/tags/tag_iframe.asp

Ответ 8

Я думаю, ваша проблема в том, что jQuery не загружается в ваши iframes.

Самый безопасный подход - полагаться на чистые методы на основе DOM для анализа вашего контента.

Или иначе, начните с jQuery, а затем один раз внутри ваших iframes, проверьте один раз, если typeof window.jQuery == 'undefined', если оно истинно, jQuery не включен внутри него и не возвращается к методу DOM.