书签在 Firefox 中不起作用答案

【问题标题】：Bookmarklet doesn't work in Firefox书签在 Firefox 中不起作用
【发布时间】：2011-09-01 05:43:39
【问题描述】：

我编写了一个脚本来更改设计不佳页面上的 CSS 元素。我一直在 Chrome 中对其进行测试，现在它功能齐全。我已将它放在网络上，现在将其用作书签文本：

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

它在 Chrome 上完美运行，但在最新的 Firefox 或 IE 中无法运行。我查看了 Chrome 和 Firefox 的错误控制台，没有人抱怨任何问题。当我将代码放入错误控制台的“代码”字段并进行评估时，Firefox 也没有反应。

Firefox 确实在底部的小状态栏中说：“Read myexamplewebsite.com”，但没有别的。

这不是我在上面运行的小书签代码的怪癖，因为我在同一台服务器上放置了一个“hello world”脚本，它运行良好。

有没有更好的方法来找出 Firefox/IE 不喜欢我的脚本的哪些地方？

如果您有兴趣，我正在运行的代码在这里。请原谅代码的丑陋，这是一个非常快速和肮脏的黑客：

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

【问题讨论】：

看起来不错，但可能与您的检查不匹配；）也许这是计算出来的样式，而不是 html plage 提供的样式：）我们需要触发此脚本的页面跨度>
好点。我看到页面上的尺寸都是绝对的，并假设它们会被硬编码（页面那个不好）。我无法共享该页面，因为它是一个专有系统（ClearQuest 错误跟踪系统），但是您对我可以查找的内容有什么建议吗？

标签： javascript firefox bookmarklet

【解决方案1】：

innerText 是 Gecko 不支持的非标准属性（到目前为止；现在正在努力为其创建标准）。使用textContent 会为您解决问题吗？

【讨论】：

这无疑将我引向了正确的方向。当我进行此更改时，四个循环中的第一个在 FF 中工作，这很好地表明我正在使用特定于 Chrome 的代码。我将继续研究修复我的脚本的其他不同之处。你知道有什么简单的方法可以查到吗？
@HXCaine 一个好的开始是查看 Firefox 中的错误控制台，看看抛出了哪些异常，如果有的话......当然，如果脚本以静默方式捕获所有异常，这将无济于事。另一种选择是在脚本中放置警报，看看您是否可以确定第一行未到达的行是什么，然后查看它之前的内容。
我注意到这个脚本的主要问题是为字段分配值。例如，tables[i].attributes.getNamedItem('style').firstChild.nodeValue = style 不会更改 nodeValue 的值。我意识到这不是最初的问题，但我不想为同一个问题制作一个新问题。你知道为什么这个作业在 Firefox 中不起作用吗？
可能是因为这依赖于 Attr 节点，这些节点在浏览器中通常没有得到很好的支持，并且即将从 DOM 中删除。为什么这段代码不只是使用 setAttribute？
我最终通过使用 setAttribute 修复了兼容性。鉴于 JS 的非标准性质，我的问题本质上是弄清楚哪些方法/字段可供我使用，但我在 Gecko DOM 页面上查找了它并找到了我需要的东西。我已经在下面发布了固定代码以供比较

【解决方案2】：

这是固定代码，适用于 Chrome、Firefox 3.6 和最新的 Firefox（截至 2011 年 8 月）。

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

for(var j in children){
    if(children[j].textContent == '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;';
        styleNode.firstChild.nodeValue = style;
        tables[i].setAttribute('style', 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].textContent == 'OS'
    || labels[i].textContent == 'App. Server'
    || labels[i].textContent == 'DBMS'
    || labels[i].textContent == 'Web Server'){
        style += ' display:none;';
        styleNode.firstChild.nodeValue = style;
        labels[i].setAttribute('style', 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 = style.replace('height: 109px;','');
        styleNode.firstChild.nodeValue = style;
        divs[i].setAttribute('style', style);

        innerDivs = divs[i].getElementsByTagName('div');
        for(var j in innerDivs){
            try {
                innerStyleNode =  innerDivs[j].attributes.getNamedItem('style');
                                    innerStyle = innerStyleNode.firstChild.nodeValue;

                                    if(innerStyle == null) {
                            continue;
                            }

                                    if(innerStyle.match('width: 665px;')
                                        && innerStyle.match(' height: 109px;')){
                    innerStyle = innerStyle.replace('height: 109px;','');
                    innerStyle += ' font-size: 130%';
                    innerDivs[j].setAttribute('style', innerStyle);
                }
            } catch(err){continue;}
        }
    }
} catch(err){continue;}
}

如果您在查找可用内容等方面遇到问题，请参阅 Gecko DOM。

【讨论】：