Seleccionar un elemento en iFrame jQuery

122

En nuestra aplicación, analizamos una página web y la cargamos en otra página en un iFrame. Todos los elementos en esa página cargada tienen sus tokenid-s. Necesito seleccionar los elementos por esos tokenid-s. Medios: hago clic en un elemento en la página principal y selecciono el elemento correspondiente en la página en el iFrame. Con la ayuda de jQuery lo estoy haciendo de la siguiente manera:

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

Sin embargo, con esta función puedo seleccionar los elementos solo en la página actual, no en el iFrame. ¿Alguien podría decirme cómo puedo seleccionar los elementos en el iFrame cargado?

Gracias.

javascript iframe getelementbyid

— cycero
fuente

157

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

También tenga en cuenta que si el srcde este iframe apunta a un dominio diferente, por razones de seguridad, no podrá acceder al contenido de este iframe en javascript.

— Darin Dimitrov
fuente

8

Tenga en cuenta que $ ('iframe') no devuelve directamente el iframe. Necesitas sacarlo de la matriz.

— McKayla

Gracias por la disposición a ayudar. Pero esto no parece funcionar.

— cycero

3

@cycero, debería funcionar. ¿Está generando este iframe dinámicamente? No olvide que si señala el elemento src de este iframe a otro dominio que no sea el suyo por razones de seguridad, no podrá acceder a su contenido.

— Darin Dimitrov

Lo cargo no desde un dominio diferente sino desde la misma carpeta. Los contenidos de iFrame se generan dinámicamente y se almacenan como un archivo en el servidor. Entonces ese archivo se está cargando en iFrame.

— cycero

@cycero, he actualizado mi respuesta. Trate de pasariframe.contents()

— Darin Dimitrov

52

Echa un vistazo a esta publicación: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

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

Coloque su selector en el método de búsqueda.

Sin embargo, esto puede no ser posible si el iframe no proviene de su servidor. Otras publicaciones hablan de permisos denegados errores.

jQuery / JavaScript: acceder al contenido de un iframe

— Kevin Bowersox
fuente

Eso funciona en términos de obtener el HTML del elemento, pero ¿cómo puedo agregar una clase CSS a ese elemento seleccionado? $ ("# iframeDiv"). contenido (). find ("[tokenid =" + token + "]"). addClass ("border"); no parece funcionar

— cycero

1

¿Obtiene algún permiso denegado errores? ¿Me puede dar el html del iframe?

— Kevin Bowersox

No, no hay permiso denegado problemas.

— cycero

20

cuando su documento esté listo, eso no significa que su iframe también esté listo,
por lo que debe escuchar el evento de carga de iframe y luego acceder a su contenido:

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

— Alnamrouti Fareed
fuente

-3

Si el caso está accediendo al IFrame a través de la consola, por ejemplo, Chrome Dev Tools, puede seleccionar el contexto de las solicitudes DOM a través del menú desplegable (ver la imagen).

— tibersky
fuente

-9

Aquí es simple JQuery para hacer esto para hacer que div se pueda arrastrar con solo un contenedor:

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

— Rajasekharreddy Kadasani
fuente