from - Obtener contenido de iframe con un selector jquery

iframe#document css

Question

¿Hay alguna forma de acceder a los contenidos de un iframe a través de un selector? Algo como esto:

$("iframe::contents .my-foo")

Estoy constantemente accediendo a los contenidos de un iframe para un proyecto en el que estoy trabajando actualmente y $("iframe").contents().find(".my-foo") está volviendo un poco tedioso de escribir.

Si esta característica no existe en jquery, ¿hay algún complemento que brinde esta funcionalidad? Si no, ¿cómo podría escribir ese plugin?

Answer 1

Intuitivamente, parece más elegante empacar todo en un solo selector, pero la verdad es que, incluso si hubiera un selector de este tipo, es mejor desde una perspectiva de rendimiento para recorrer con find (). Entonces jQuery no tiene que analizar y analizar la cadena.

Answer 2

Puede crear su propio selector personalizado. Me gusta:

$.extend($.expr['':''], {
contents: function(elem, i, attr){
return $(elem).contents().find( attr[3] );
}
}); 

El uso debería ser como

$(''iframe:contents(.my-foo)'').remove(); 

Answer 3

Tuve este problema una vez donde lo encontré tedioso. Nunca encontré una solución para escribir un solo selector como ese.

Aun así, el selector sigue siendo bastante largo. La solución más obvia para mí es simplemente guardarla en una variable.

var frame = $("iframe").contents();
frame.find(".my-foo")
...

¿Eso está mejor?

Answer 4

Agregado aquí para la posteridad. La solución con la que terminé fue anular el objeto root jquery con un poco de código de análisis personalizado. Algo como esto:

(function() {
var rootjq = window.jQuery;
var myjq = function(selector, context) {
if(selector.indexOf("::contents") === -1) {
return rootjq(selector, context);
} else {
var split = selector.split("::contents");
var ifrm = split[0];
var subsel = split.splice(1).join("::contents");
var contents = rootjq(ifrm, context).contents();
// Recursive call to support multiple ::contents in a query
return myjq(subsel, contents);
}
};
myjq.prototype = myjq.fn = rootjq.fn;
window.jQuery = window.$ = myjq;
})();

Tenga en cuenta que el doble de dos puntos ( :: :) en css significa seleccionar pseudo elemento , mientras que el de dos puntos significa seleccionar por pseudo clase.