Selezione di un elemento in iFrame jQuery

122

Nella nostra applicazione, analizziamo una pagina web e la cariciamo in un'altra pagina in un iFrame. Tutti gli elementi in quella pagina caricata hanno i loro tokenid-s. Ho bisogno di selezionare gli elementi da quei tokenid-s. Significa: faccio clic su un elemento nella pagina principale e seleziono l'elemento corrispondente nella pagina nell'iFrame. Con l'aiuto di jQuery lo sto facendo nel modo seguente:

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

Tuttavia, con questa funzione posso selezionare solo gli elementi nella pagina corrente, non nell'iFrame. Qualcuno potrebbe dirmi come posso selezionare gli elementi nell'iFrame caricato?

Grazie.

javascript iframe getelementbyid

— cycero
fonte

157

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

Tieni inoltre presente che se il srcdi questo iframe punta a un dominio diverso, per motivi di sicurezza, non sarai in grado di accedere ai contenuti di questo iframe in javascript.

— Darin Dimitrov
fonte

8

Tieni presente che $ ('iframe') non restituisce direttamente l'iframe. Devi estrarlo dall'array.

— McKayla

Grazie per la disponibilità ad aiutare. Ma questo non sembra funzionare.

— cycero

3

@cycero, dovrebbe funzionare. Stai generando questo iframe in modo dinamico? Non dimenticare che se punti l'elemento src di questo iframe su un dominio diverso dal tuo per motivi di sicurezza non puoi accedere ai suoi contenuti.

— Darin Dimitrov,

Lo carico non da un dominio diverso ma dalla stessa cartella. I contenuti dell'iFrame vengono generati dinamicamente e archiviati come file sul server. Quindi quel file viene caricato in iFrame.

— cycero

@cycero, ho aggiornato la mia risposta. Prova a passareiframe.contents()

— Darin Dimitrov

52

Dai un'occhiata a questo post: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

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

Posiziona il tuo selettore nel metodo di ricerca.

Ciò potrebbe non essere possibile, tuttavia, se l'iframe non proviene dal tuo server. Altri post parlano di errori di autorizzazione negata.

jQuery / JavaScript: accesso ai contenuti di un iframe

— Kevin Bowersox
fonte

Funziona in termini di acquisizione dell'HTML dell'elemento, ma come posso aggiungere una classe CSS a quell'elemento selezionato? $ ("# iframeDiv"). contents (). find ("[tokenid =" + token + "]"). addClass ("border"); non sembra funzionare.

— cycero

1

Ricevi errori di autorizzazione negata? Puoi darmi l'html dell'iframe?

— Kevin Bowersox,

No, nessun permesso negato problemi.

— cycero

20

quando il tuo documento è pronto, ciò non significa che anche il tuo iframe sia pronto,
quindi dovresti ascoltare l'evento di caricamento dell'iframe e accedere ai tuoi contenuti:

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

— Fareed Alnamrouti
fonte

-3

Se il caso sta accedendo all'IFrame tramite console, ad esempio Chrome Dev Tools, puoi semplicemente selezionare il contesto delle richieste DOM tramite il menu a discesa (vedi l'immagine).

— tibersky
fonte

-9

ecco un semplice JQuery per fare questo per rendere il div trascinabile con nell'unico contenitore:

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

— Rajasekharreddy Kadasani
fonte