在iframe中使用class的元素

Question

我在页面上有几个iframe。其中有一些类名为test的元素。我需要为它们设置style。

当我只有一个iframe时，我可以使用下一个构造：

$('#iframeId').contents().find('.test').css({background: '#f00'});

但是我有几个iframe，所以最好不要设置具体的iframe并使用如下构造：

$('.test').css({background: '#f00'});

但它当然不起作用。

之前我使用过原始getElementsByClassName，但在IE8出现缺陷时无效。

这可能是个愚蠢的问题，但是..有没有像：

这样的结构

$(getElementById('something')).css({background: '#f00'});

这将非常有帮助。我的意思是，用JavaScript包裹jQuery对象，然后使用jQuery方法。

更新：我通过下一个结构解决了这个问题：

[].forEach.call(document.getElementById('something').querySelectorAll('.test'), function (el) {
    el.style.backgroundColor = '#f00';
});

但它仍然不适用于IE8。

Answer 1

你应该试试这样的事情

$("iframe").each(function(index){
   $(this).contents().find('.test').css({background: '#f00'});
});

希望这会对你有所帮助。

Answer 2

您可能遇到以下两个问题之一： 1）您通常无法修改从外部域返回的iFrame的内容，但这可能不是这种情况。如果您的iframe指向您的域名，那么您应该没问题。 2）ie8已经知道jQuery的.css可能依赖的“innerHTML”属性的问题。相反，尝试使用DOM方法：

document.getElementById("yourIframe").contentWindow.document.body.getElementById("innerIframeElement").setAttribute("style", "background:'#f00';"