Question

无论如何通过选择器访问iframe的内容？像这样：

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

我一直在为我正在处理的项目访问iframe的内容，$("iframe").contents().find(".my-foo")输入的内容变得有点乏味。

如果开箱即用的jquery中不存在此功能，是否有提供此功能的插件？如果不是，我怎么能写这样的插件？

Answer 1

我曾经遇到过这个问题。我从未找到过如何编写单一选择器的解决方案。

即便如此，选择器仍然很长。对我来说最明显的解决方案就是将其保存到变量中。

var frame = $("iframe").contents();

frame.find(".my-foo")
...

这样更好吗？

Answer 2

直观地说，将所有内容打包到一个选择器中似乎更优雅，但事实是，即使有这样的选择器，从性能角度来看，使用find（）进行遍历会更好。然后jQuery不必解析和分析字符串。

Answer 3

此处为后人添加。我最终使用的解决方案是使用一些自定义解析代码覆盖根jquery对象。像这样：

(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;
})();

请注意，css中的双冒号（::）表示select pseudo element，而单冒号表示按伪类选择。

Answer 4

您可以创建自己的自定义选择器。像：

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

用法应该是

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

使用jquery选择器获取iframe内容

4 个答案: