选择由外部脚本动态创建的 iframe 中的元素

Question

我有一个图库，单击照片时会打开一个模式窗口。有一个 div #sbox-content 是空的，当点击照片时，外部脚本会动态地将一个 iframe 附加到这个 div。

我需要在这个 iframe 完全加载后选择 h2 元素。

到目前为止我已经尝试过什么（更改颜色只是为了查看它是否被正确选择）：

jQuery(document.body).on('DOMNodeInserted', 'iframe', function() {
    jQuery('h2.item-title').css({
        color: '#FF0000'
    })
});

和：

jQuery('iframe').load(function() {
    jQuery('h2.item-title').css({
        color: '#FF0000'
    })
});

和：

jQuery('iframe').load(function() {
    jQuery(this).contents().find('h2.item-title').css({
        color: '#FF0000'
    })
});

没有任何效果... 是我做错了什么，还是整个方法都不对？

Answer 1

试试这个：

jQuery(document).on('load','iframe',function() {
    jQuery(this).find('h2.item-title').css({
        color: '#FF0000'
    })
}).load();

Answer 2

这是一个使用 javascript 的代码（没有库）。

编辑

var newInterval;

newInterval = setInterval(function(){

if(typeof document.getElementById('sbox-content') != 'undefined' && document.getElementById('sbox-content') != null){

clearInterval(newInterval);

document.getElementById('sbox-content').onclick = function(){

checkifIframeExists();

}

}

},2000);

如果 div#sbox-content 内只有 1 个 iframe 并且 DOM 加载完成时

function checkifIframeExists(){

iframe_ = document.getElementById('sbox-content').getElementsByTagName('iframe')[0];

iframe_.onload = function(){

if(this.contentDocument){ response = this.contentDocument; }else{ response = this.contentWindow.document; }

//So, with the above code we already have the content of the loaded iframe 

h2els = response.getElementsByTagName('h2');

if(h2els.length==1){

//now we are setting/changing the first h2 element's text color

h2els[0].style.color = '#FF0000';

}else{

//or if there is more than one h2 element, we loop through all the h2 elements and find the one with class 'item-title' and changing its color

for(var i=0;i<h2els.length;i++){

if(h2els[i].className == 'item-title'){

h2els[i].style.color = '#FF0000';

}

}

}

}
}