jQuery, seleziona elemento all'interno di iframe, che si trova all'interno di un iframe

<body> 
    <iframe id="uploads"> 
     <iframe> 
      <div id="element">...</div> 
     </iframe> 
    </iframe> 
</body>

Tutti gli iframe sono sullo stesso dominio senza problemi www/non-www.

Ho selezionato con successo gli elementi all'interno del primo iframe ma non del secondo iframe nidificato.

Ho provato alcune cose, questo è il più recente (e un tentativo piuttosto disperato).

var iframe = jQuery('#upload').contents(); 
var iframeInner = jQuery(iframe).find('iframe').contents(); 
var iframeContent = jQuery(iframeInner).contents().find('#element'); 

// iframeContent is null

Edit: per escludere un problema di temporizzazione ho usato un evento click e aspettato un po '.

jQuery().click(function(){ 
    var iframe = jQuery('#upload').contents().find('iframe'); 
    console.log(iframe.find('#element')); // [] null 
});

Qualche idea? Grazie.

Aggiornamento: posso selezionare il secondo iframe in questo modo ...

var iframe = jQuery('#upload').contents().find('iframe');

Il problema ora sembra essere che lo src è vuota come l'iframe è generato con javascript. Quindi l'iframe è selezionato ma la lunghezza del contenuto è 0.

fonte

2013-03-11 Ian Brindley

http://mattgemmell.com/2008/12/08/what-have-you-tried/ –

questo probabilmente non è utile ma non posso fare a meno di chiedermi * perché * vuoi manipolare due volte documento iframe ... come sei arrivato qui? Possibile problema XY. –

Sto creando un'applicazione DRM che utilizza CKFinder con Amazon S3. È CKFinder che sto cercando di modificare. Ho apportato grandi cambiamenti alle funzionalità ma ora è l'interfaccia utente che devo cambiare. (che non può essere modificato con CSS in quanto vi sono più istanze che non richiedono questa specifica modifica) –

Probabilmente hai un problema di temporizzazione. È probabile che il tuo documento.ready raccomandi prima che venga caricato il secondo iFrame. Non hai abbastanza informazioni per aiutarti ulteriormente, ma facci sapere se questo sembra il problema possibile.

fonte

2013-03-11 16:48:29 Carntel

Non penso che sia un tempismo Problema: cercare di trovare l'elemento in un evento click dopo un minuto restituisce null. Vedi modifica. –

La cosa è, il codice che hai fornito non funzionerà perché l'elemento deve avere una proprietà "src", come:

<iframe id="uploads" src="http://domain/page.html"></iframe>

E 'ok per utilizzare .contents() per ottenere il contenuto:

$('#uploads).contents() ti darà accesso al secondo iframe, ma se quell'iframe è "INTERNO", il documento http://domain/page.html viene caricato con # caricati iframe.

Per provare che ho ragione su questo, ho creato 3 file HTML denominato main.html, iframe.html e noframe.html e quindi selezionato l'elemento div # bene con:

$('#uploads').contents().find('iframe').contents().find('#element');

ci sarà essere un ritardo in cui l'elemento non sarà disponibile poiché è necessario attendere che l'iframe carichi la risorsa. Inoltre, tutti gli iframe devono essere nello stesso dominio.

Spero che questo aiuti ...

Qui va il codice html per i 3 file che ho usato (sostituire la "src" attributi con il tuo dominio e URL):

main.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>main.html example</title> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <script> 
     $(function() { 
      console.log($('#uploads').contents().find('iframe').contents().find('#element')); // nothing at first 

      setTimeout(function() { 
       console.log($('#uploads').contents().find('iframe').contents().find('#element')); // wait and you'll have it 
      }, 2000); 

     }); 
    </script> 
</head> 
<body> 
    <iframe id="uploads" src="http://192.168.1.70/test/iframe.html"></iframe> 
</body>

iframe.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>iframe.html example</title> 
</head> 
<body> 
    <iframe src="http://192.168.1.70/test/noframe.html"></iframe> 
</body>

noframe.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>noframe.html example</title> 
</head> 
<body> 
    <div id="element">some content</div> 
</body>

fonte

2013-03-21 19:11:50

Il mio male. In realtà puoi rinunciare all'attributo "src" su un iframe e scrivere codice con javascript: ' ' –

Questo ha funzionato per me. E non ho ID ovunque. Ho dovuto giocare con le classi :) –

@CarlosCastillo, grazie mille. Ha risolto il mio problema con iframe anche nel modal bootstrap. Sto cercando il modo di cambiare elemento all'interno di iframe, ma la mia funzione è stata sempre caricata prima che iframe fosse completamente caricato. Aspettare qualche secondo è una soluzione. Grazie ancora per la risposta utile, voto 1+ :) –

var iframeInner = jQuery(iframe).find('iframe').contents();

var iframeContent = jQuery(iframeInner).contents().find('#element');

iframeInner contiene elementi di

<div id="element">other markup goes here</div>

e iframeContent troverà per gli elementi che si trovano all'interno di

<div id="element">other markup goes here</div>

(find non cerca sull'elemento corrente) è per questo che restituisce null.

fonte

2013-03-25 06:21:21

Si dovrebbe utilizzare il metodo dal vivo per gli elementi che sono resi più tardi, come colorbox, campi nascosti o iframe

$(".inverter-value").live("change",function() { 
    elem = this 
    $.ajax({ 
     url: '/main/invertor_attribute/', 
     type: 'POST', 
     aysnc: false, 
     data: {id: $(this).val() }, 
     success: function(data){ 
     // code 
     }, 
     dataType: 'html' 
    }); 
    });

fonte

2013-03-25 06:31:56

Hey Ho qualcosa che sembra fare ciò che si vuole un fare. Implica una copia sporca ma funziona. È possibile trovare il codice di lavoro here

Così qui è il file HTML principale:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      Iframe = $('#frame1'); 

      Iframe.on('load', function(){ 
       IframeInner = Iframe.contents().find('iframe'); 

       IframeInnerClone = IframeInner.clone(); 

       IframeInnerClone.insertAfter($('#insertIframeAfter')).css({display:'none'}); 

       IframeInnerClone.on('load', function(){ 
        IframeContents = IframeInner.contents(); 

        YourNestedEl = IframeContents.find('div'); 

        $('<div>Yeepi! I can even insert stuff!</div>').insertAfter(YourNestedEl) 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="insertIframeAfter">Hello!!!!</div> 
    <iframe id="frame1" src="Test_Iframe.html"> 

    </iframe> 
</body> 
</html>

Come si può vedere, una volta che il primo Iframe è stato caricato, ottengo il secondo e clonarlo. Lo reinserisco quindi nella dom, quindi posso accedere all'evento onload. Una volta che questo è stato caricato, recupero il contenuto da quello non clonato (anch'esso deve essere caricato, dato che usano lo stesso src). È quindi possibile fare ciò che si desidera con il contenuto.

Ecco il file Test_Iframe.html:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div>Test_Iframe</div> 
    <iframe src="Test_Iframe2.html"> 
    </iframe> 
</body> 
</html>

e il file Test_Iframe2.html:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div>I am the second nested iframe</div> 
</body> 
</html>

fonte

2013-03-27 19:21:17

Penso che il modo migliore per raggiungere il vostro div:

var your_element=$('iframe#uploads').children('iframe').children('div#element');

Dovrebbe funzionare bene.

fonte

2013-03-28 11:33:13 csaron92

$ ('iframe'). Children ('div') non trova nulla. – puppeteer701

Se il browser supporta iframe, il DOM all'interno di iframe proviene dall'attributo src del rispettivo tag. I contenuti che sono all'interno del tag iframe vengono utilizzati come meccanismo di fallback in cui il browser non supporta i tag iframe.

Rif: http://www.w3schools.com/tags/tag_iframe.asp

fonte

2013-03-28 15:17:57

immagino il vostro problema è che jQuery non è caricato nel iframe.

L'approccio più sicuro consiste nell'utilizzare metodi puramente basati su DOM per analizzare il contenuto.

Oppure, iniziare con jQuery e quindi una volta all'interno degli iframe, testare una volta se typeof window.jQuery == 'undefined', se è vero, jQuery non è abilitato al suo interno e fallback sul metodo basato su DOM.

fonte

2013-03-28 15:56:10

jQuery, seleziona elemento all'interno di iframe, che si trova all'interno di un iframe

risposta

Problemi correlati