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'; } } } } }

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

2 个答案: