使用 jquery 选择器获取 iframe 内容
Posted
技术标签:
【中文标题】使用 jquery 选择器获取 iframe 内容【英文标题】:Get iframe contents with a jquery selector 【发布时间】:2011-08-24 23:14:02 【问题描述】:是否可以通过选择器访问 iframe 的内容?像这样的:
$("iframe::contents .my-foo")
我一直在访问我目前正在进行的项目的 iframe 内容,$("iframe").contents().find(".my-foo")
的输入变得有点乏味。
如果开箱即用的 jquery 中不存在此功能,是否有提供此功能的插件?如果不是我怎么写这样的插件?
【问题讨论】:
【参考方案1】:我曾经遇到过这个问题,我觉得它很乏味。我从来没有找到如何编写这样的单个选择器的解决方案。
即便如此,选择器仍然相当长。对我来说最明显的解决方案就是将它保存到一个变量中。
var frame = $("iframe").contents();
frame.find(".my-foo")
...
这样更好吗?
【讨论】:
更多信息 -contents()
= children()
+ plaintext
。有些人可能在想contents()
有什么用,而我们可以只使用$('iframe').find('.my-foo')
,那么请从w3schools.com/jquery/traversing_contents.asp阅读The contents() method can also access the html of an iframe, if it is in the same domain.
【参考方案2】:
直觉上,将所有内容打包到一个选择器中似乎更优雅,但事实是,即使有这样的选择器,从性能角度来看,用 find() 遍历更好。那么jQuery就不用对字符串进行解析分析了。
【讨论】:
【参考方案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,而单冒号表示通过伪类选择。
【讨论】:
【参考方案4】:您可以创建自己的自定义选择器。喜欢:
$.extend($.expr[':'],
contents: function(elem, i, attr)
return $(elem).contents().find( attr[3] );
);
用法应该是这样的
$('iframe:contents(.my-foo)').remove();
【讨论】:
出于好奇,为什么要使用$.extend
?为什么不直接像这样添加属性:$.expr[":"].contents = function(...) ...
?
这个答案不起作用。我正在寻找 $("iframe").contents().find(".my-foo")
的替代品。挂在$.expr[':']
上的函数就像过滤器一样。以上是关于使用 jquery 选择器获取 iframe 内容的主要内容,如果未能解决你的问题,请参考以下文章