Вложенные рамки iframe

Question

Вложенные рамки 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.

43

jquery iframe

Источник

user1698723 11 мар '13 в 16:45

8 ответов

Другие вопросы по тегам jquery iframe

user1897337 21 мар '13 в 19:11 2013-03-21 19:11 · Answer 1 · 2013-03-21 19:11

Дело в том, что предоставленный вами код не будет работать, потому что <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>

user1155542 25 мар '13 в 06:21 2013-03-25 06:21 · Answer 2 · 2013-03-25 06:21

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

user1411628 27 мар '13 в 19:21 2013-03-27 19:21 · Answer 3 · 2013-03-27 19:21

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

Итак, вот основной 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>

user2184246 25 мар '13 в 06:31 2013-03-25 06:31 · Answer 4 · 2013-03-25 06:31

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

user877144 11 мар '13 в 16:48 2013-03-11 16:48 · Answer 5 · 2013-03-11 16:48

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

1

Источник

user877144 11 мар '13 в 16:48

user1934177 28 мар '13 в 15:56 2013-03-28 15:56 · Answer 6 · 2013-03-28 15:56

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

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

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

user251708 28 мар '13 в 15:17 2013-03-28 15:17 · Answer 7 · 2013-03-28 15:17

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

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

0

Источник

user251708 28 мар '13 в 15:17

user2147585 28 мар '13 в 11:33 2013-03-28 11:33 · Answer 8 · 2013-03-28 11:33

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

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

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

0

Источник

user2147585 28 мар '13 в 11:33