在Chrome和Safari中getElementsByTagName无法正常工作

Question

我正在使用javascript方法getElementsByTagName("a")来调用所有'a'标签并对其进行一些效果。该方法在Firefox和Opera中有效，但在Chrome和Safari中无效。 当我查看Chrome和Safari的调试工具时，它们会说："无法调用null的getElementsByTagName方法的未捕获类型错误" 为什么会这样？有什么解决方法吗？请问有人可以给我建议吗？

先行致谢。

以下是代码：

function popUpSAPWindow(){
// Find all links in the page and put them into an array.
var linksInOrderLinesTable = document.getElementById("orderLinesTable").getElementsByTagName("a"); // The line doing the error
var linksLen = linksInOrderLinesTable.length;

// If the link text is 'SAP' then modify the attributes
for(var i = 0; i < linksLen; i++){
    if(linksInOrderLinesTable[i].innerHTML == "SAP"){
        // Store the 'href' value of each SAP link.
        var sapHref = linksInOrderLinesTable[i].href;

        // Modify the attributes of each SAP link.      
        linksInOrderLinesTable[i].setAttribute("href", "javascript:return false;");
        linksInOrderLinesTable[i].setAttribute("onclick", "sapNewWindow(\'" + sapHref + "\')");
    }
}

它可以与以下HTML一起使用：

{}

<table id="orderLinesTable" summary="List of orders made by customers that the administrator can pick and deal with">
<tr>
    <th>Status</th>
    <th>Basket id</th>
    <th>Order line id</th>
    <th>Product</th>
    <th>Company</th>
    <th>Catalogue</th>
    <th>Date</th>
    <th>Details</th>
</tr>
<tr>
    <td>Accepted</td>
    <td>236569</td>
    <td>207</td>
    <td>OS Master Map</td>
    <td>NHS</td>
    <td>Standard</td>
    <td>1 Aug 10</td>
    <td><a href="/orderLineDetails.html">Normal</a> <a href="/orderLineDetails.html">SAP</a></td>
</tr>
<tr>
    <td>New</td>
    <td>236987</td>
    <td>528</td>
    <td>Code-Point</td>
    <td>BT</td>
    <td>Standard</td>
    <td>9 Aug 10</td>
    <td><a href="/orderLineDetails.html">Normal</a> <a href="/orderLineDetails.html">SAP</a></td>
</tr>

但是当我在其他页面时，它会出现上述错误。

- Shaoz

---

这个错误表明问题不在于方法本身，而是你试图调用它的对象为空（因此没有该方法）。你能发一下你的JavaScript代码吗？ - Rob

好的，我现在会发布它，看一下问题本身下面。 - Shaoz

Answer 1

问题在于，当您在没有具有orderLinesTable的页面上调用document.getElementById("orderLinesTable").getElementsByTagName("a")时，getElementById将返回null。因此，在null上调用getElementsByTagName将导致错误。

解决方法如下：

var orderLinesTable = document.getElementById("orderLinesTable");
var linksInOrderLinesTable = [];

if (orderLinesTable) { // only get the links when the table exists
    linksInOrderLinesTable = orderLinesTable.getElementsByTagName("a");
}

- Ivo Wetzel

---

你的代码使用if语句运行良好，非常感谢。但是Chrome现在显示：“资源被解释为脚本，但传输的MIME类型为text/plain”。我知道所有的script标签都有MIME类型="tetx/javascript"。Chrome的过于敏感的引擎出了什么问题吗？你以前遇到过这个消息吗？ - Shaoz

如果你通过 src 属性包含脚本，Chrome 可能会警告您的服务器没有正确设置 content-type 标头的事实。 - Ivo Wetzel

Answer 2

Safari和Chrome都支持这种方法。你正在使用它的对象可能无法被一致地检索，因此它会评估为null。请检查您调用它的对象的获取方式。

顺便说一下，这不是JavaScript方法，而是DOM API中的方法。

编辑：

document.getElementById("orderLinesTable")

警告这是什么。它是空的吗？

- meder omuraliev

---

是的，它会变成null，因为此代码适用于具有“orderLinesTable”id的特定页面。仅在没有该ID的其他页面上显示错误。问题是，javascript文件是整个Web应用程序中的包含文件。其他页面不应该能够实现代码，因为它与它们无关，这就是FF和Opera所做的，它们忽略它。那么他们为什么要打扰Chrome和Safari呢？顺便说一句：感谢您对DOM API的纠正。 - Shaoz

我刚刚用警报检查了一下，它显示为空，那我该怎么办？我卡住了... - Shaoz

提供HTML代码。告诉我们何时调用该函数。以及您没有透露的任何其他信息。 - meder omuraliev

请看下面HTML的JavaScript代码。它在那个页面上运行得很好，但当我在其他页面上时它会给我报错。我知道为什么，但我不知道该怎么办。我甚至尝试了“如果它是'null'就做这个，...等等”，但仍然不起作用... :( - Shaoz