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


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

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

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

спасибо.

5 101

5 ответов:

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

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

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

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

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

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

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

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

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

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

Chrome Dev Tools - Selecting the iFrame

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

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