使用 jquery 选择器获取 iframe 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5992791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get iframe contents with a jquery selector
提问by Xavi
Is there anyway to access an iframe's contents via a selector? Something like this:
有没有办法通过选择器访问 iframe 的内容？像这样的东西：
$("iframe::contents .my-foo")
I'm constantly accessing an iframe's contents for a project I'm currently working on and $("iframe").contents().find(".my-foo")is becoming a bit tedious to type out.
我一直在访问我目前正在处理的项目的 iframe 内容，并且输入$("iframe").contents().find(".my-foo")内容变得有点乏味。
If this feature doesn't exist in jquery out of the box, is there a plugin that provides this functionality? If not how could I write such a plugin?
如果开箱即用的 jquery 中不存在此功能，是否有提供此功能的插件？如果不是我怎么能写这样的插件？
回答by Tesserex
I had this issue once where I found it tedious. I never found a solution for how to write a single selector like that.
我曾经遇到过这个问题，我觉得它很乏味。我从来没有找到如何编写这样的单个选择器的解决方案。
Even so, the selector is still rather long. The most obvious solution to me is just save it to a variable.
即便如此，选择器仍然相当长。对我来说最明显的解决方案就是将它保存到一个变量中。
var frame = $("iframe").contents();
frame.find(".my-foo")
...
Is that better?
那个更好吗？
回答by glortho
Intuitively, it seems more elegant to pack everything into the one selector, but the truth is that, even if there were such a selector, it is better from a performance perspective to traverse with find(). Then jQuery doesn't have to parse and analyze the string.
直观上看，把所有东西都打包到一个选择器中似乎更优雅，但事实是，即使有这样的选择器，从性能的角度来看，用 find() 遍历更好。然后 jQuery 不必解析和分析字符串。
回答by Xavi
Added here for posterity. The solution I ended up going with was to override the root jquery object with a bit of custom parsing code. Something like this:
为后人添加在这里。我最终采用的解决方案是使用一些自定义解析代码覆盖根 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;
})();
Note that double colon (::) in css means select pseudo element, while single colon means select by pseudo class.
请注意，::css中的双冒号 ( ) 表示选择伪元素，而单冒号表示按伪类选择。
回答by jAndy
You can create your own custom selector. Like:
您可以创建自己的自定义选择器。喜欢：
$.extend($.expr[':'], {
contents: function(elem, i, attr){
return $(elem).contents().find( attr[3] );
}
});
Usage should be like
用法应该像
$('iframe:contents(.my-foo)').remove();
