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

Question

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

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

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

Спасибо.

Answer 1

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

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

Answer 2

Посмотрите на этот пост: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

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

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

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

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

Answer 3

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

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});

Answer 4

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

Answer 5

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

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );