Wybór elementu w iFrame jQuery

122

W naszej aplikacji analizujemy stronę internetową i ładujemy ją na inną stronę w elemencie iFrame. Wszystkie elementy na tej załadowanej stronie mają swoje identyfikatory tokenów. Muszę wybrać elementy według tych tokenid-ów. Oznacza - klikam element na stronie głównej i zaznaczam odpowiedni element na stronie w ramce iFrame. Z pomocą jQuery robię to w następujący sposób:

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

Jednak dzięki tej funkcji mogę wybierać elementy tylko na bieżącej stronie, a nie w elemencie iFrame. Czy ktoś mógłby mi powiedzieć, jak mogę wybrać elementy w załadowanym elemencie iFrame?

Dzięki.

javascript iframe getelementbyid

— cyklo
źródło

157

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

Należy również pamiętać, że jeśli element srctego elementu iframe wskazuje inną domenę, ze względów bezpieczeństwa nie będzie można uzyskać dostępu do zawartości tego elementu iframe w języku javascript.

— Darin Dimitrov
źródło

8

Pamiętaj, że $ ('iframe') nie zwraca bezpośrednio elementu iframe. Musisz go wyciągnąć z macierzy.

— McKayla,

Dzięki za chęć pomocy. Ale to nie działa.

— cyklo

3

@cycero, powinno działać. Czy generujesz ten element iframe dynamicznie? Nie zapominaj, że jeśli skierujesz element src tego elementu iframe na domenę inną niż Twoja ze względów bezpieczeństwa, nie możesz uzyskać dostępu do jego zawartości.

— Darin Dimitrov

Ładuję go nie z innej domeny, ale z tego samego folderu. Zawartość iFrame jest generowana dynamicznie i przechowywana jako plik na serwerze. Następnie ten plik jest ładowany do iFrame.

— cyklo

@cycero, zaktualizowałem moją odpowiedź. Spróbuj podaćiframe.contents()

— Darin Dimitrov

52

Spójrz na ten post: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

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

Umieść swój selektor w metodzie wyszukiwania.

Może to jednak nie być możliwe, jeśli element iframe nie pochodzi z serwera. Inne posty mówią o błędach odmowy uprawnień.

jQuery / JavaScript: dostęp do zawartości iframe

— Kevin Bowersox
źródło

Działa to pod względem pobierania kodu HTML elementu, ale jak mogę dodać klasę CSS do tego wybranego elementu? $ ("# iframeDiv"). content (). find ("[tokenid =" + token + "]"). addClass ("border"); nie wydaje się działać.

— cyklo

1

Czy otrzymujesz błędy związane z odmową przyznania uprawnień? Czy możesz podać kod HTML elementu iframe?

— Kevin Bowersox,

Nie, brak uprawnień odmówił problemów.

— cyklo

20

kiedy twój dokument jest gotowy, nie oznacza to, że twój iframe też jest gotowy,
więc powinieneś wysłuchać zdarzenia ładowania iframe, a następnie uzyskać dostęp do swojej zawartości:

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

— Fareed Alnamrouti
źródło

-3

Jeśli sprawa uzyskuje dostęp do ramki iFrame za pośrednictwem konsoli, np. Chrome Dev Tools, możesz po prostu wybrać kontekst żądań DOM za pomocą menu rozwijanego (patrz zdjęcie).

— Tibersky
źródło

-9

tutaj jest proste JQuery, aby to zrobić, aby umożliwić przeciąganie div tylko w kontenerze:

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

— Rajasekharreddy Kadasani
źródło