Выбор элемента в iFrame jQuery

122

В нашем приложении мы анализируем веб-страницу и загружаем ее на другую страницу в iFrame. Все элементы на этой загруженной странице имеют свои токениды. Мне нужно выбрать элементы по этим токенидам. Значит - я нажимаю на элемент на главной странице и выбираю соответствующий элемент на странице в iFrame. С помощью jQuery я делаю это следующим образом:

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

Однако с помощью этой функции я могу выбирать элементы только на текущей странице, а не в iFrame. Может ли кто-нибудь сказать мне, как я могу выбрать элементы в загруженном iFrame?

Спасибо.

cycero
источник

Ответы:

157
var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

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

Дарин Димитров
источник
8
Имейте в виду, что $ ('iframe') не возвращает iframe напрямую. Его нужно вытащить из массива.
McKayla
Спасибо за готовность помочь. Но, похоже, это не работает.
cycero
3
@cycero, должно работать. Вы создаете этот iframe динамически? Не забывайте, что если вы укажете элемент src этого iframe на другой домен, отличный от вашего, из соображений безопасности вы не сможете получить доступ к его содержимому.
Дарин Димитров
Я загружаю его не из другого домена, а из той же папки. Содержимое iFrame создается динамически и сохраняется в виде файла на сервере. Затем этот файл загружается в iFrame.
cycero
@cycero, я обновил свой ответ. Попробуй пройтиiframe.contents()
Дарин Димитров
52

Взгляните на этот пост: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

Поместите свой селектор в метод поиска.

Однако это может быть невозможно, если iframe поступает не с вашего сервера. В других сообщениях говорится об ошибках отказа в разрешении.

jQuery / JavaScript: доступ к содержимому iframe

Кевин Бауэрсокс
источник
Это работает с точки зрения получения HTML-кода элемента, но как я могу добавить класс CSS к этому выбранному элементу? $ ("# iframeDiv"). contents (). find ("[tokenid =" + token + "]"). addClass ("border"); похоже, не работает.
cycero
1
Получаете ли вы какие-либо ошибки отказа в разрешении? Вы можете дать мне HTML-код iframe?
Кевин Бауэрсокс,
Нет, нет проблем с отказом в разрешении.
cycero
20

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

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});
Фарид Алнамрути
источник
-3

Если дело касается доступа к IFrame через консоль, например, Chrome Dev Tools, вы можете просто выбрать контекст запросов DOM в раскрывающемся списке (см. Рисунок).

Инструменты разработчика Chrome - выбор iFrame

tibersky
источник
-9

вот простой JQuery, чтобы сделать это перетаскиваемым div с помощью только контейнера:

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );
Раджасекхарредди Кадасани
источник