Question

I’ve written a script that changes the CSS elements on a badly designed page. I was testing it in Chrome as I went along, and now it’s fully functional. I’ve placed it on the web and am now using this as the bookmarklet text:

javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://myexamplewebsite.com/files/adjustPage.js';})();

It works perfectly on Chrome, but doesn’t work in the latest Firefox or IE. I’ve looked in the error consoles of Chrome and Firefox and neither one complains of any issues. Firefox also doesn’t react when I put the code in the ‘code’ field of the error console and evaluate.

Firefox does say in the little status bar at the bottom: “Read myexamplewebsite.com”, but nothing else.

It isn’t a quirk in the bookmarklet code I’m running above, because I’ve placed a ‘hello world’ script on the same server and it worked fine.

Is there a better way to work out what Firefox/IE don’t like about my script?

If you’re interested, the code I’m running is here. Please excuse the ugliness of the code, it was a very quick and dirty hack:

var section = document.getElementsByClassName('cqGroupBox');
for(var i in section) {
var children = section[i].childNodes;

for(var j in children){
    if(children[j].innerText == 'Detected on configuration') {
        var style = section[i].getAttribute('style');
        style += ' display:none;';
        section[i].setAttribute('style', style);
        break;
    }
}
}

var tables = document.getElementsByTagName('table');
for(var i in tables) {
try{
    var styleNode = tables[i].attributes.getNamedItem('style');
    var style = styleNode.firstChild.nodeValue;

    if(style == null) {
        continue;
    }

    if(style.match('top: 434px; left: 120px;')
    || style.match('top: 461px; left: 120px;')
    || style.match('top: 434px; left: 456px;')
    || style.match('top: 461px; left: 456px;')){
        style += ' display:none;';
        tables[i].attributes.getNamedItem('style').firstChild.nodeValue = style;
    }
} catch(err){continue;}
}


var labels = document.getElementsByTagName('label');
for(var i in labels) {
try{
    var styleNode = labels[i].attributes.getNamedItem('style');
    var style = styleNode.firstChild.nodeValue;

    if(style == null) {
        continue;
    }

    if(labels[i].innerText == 'OS'
    || labels[i].innerText == 'App. Server'
    || labels[i].innerText == 'DBMS'
    || labels[i].innerText == 'Web Server'){
        style += ' display:none;';
        labels[i].attributes.getNamedItem('style').firstChild.nodeValue = style;
    }
} catch(err){continue;}
}

var divs = document.getElementsByTagName('div');
for(var i in divs) {
try {
    var styleNode = divs[i].attributes.getNamedItem('style');
    var style = styleNode.firstChild.nodeValue;

    if(style == null) {
        continue;
    }

    if(style.match('top: 291px; left: 23px;')){
        style.replace('height: 109px;','');
        divs[i].attributes.getNamedItem('style').firstChild.nodeValue = style;

        innerDivs = divs[i].getElementsByTagName('div');
        for(var j in innerDivs){
            try {
                innerStyle = innerDivs[j].attributes.getNamedItem('style').firstChild.nodeValue;
                if(innerStyle.match('width: 665px; height: 109px;')){
                    innerStyle = innerStyle.replace('height: 109px;','');
                    innerStyle += ' font-size: 130%';
                    innerDivs[j].attributes.getNamedItem('style').firstChild.nodeValue = innerStyle;
                }
            } catch(err){continue;}
        }
    }
} catch(err){continue;}
}

Answer 1

innerText is a nonstandard property (so far; there are now efforts to create a standard for it) which is not supported in Gecko. Does using textContent instead fix things for you?