0

这件事让我发疯......我有一个简单的 js 脚本，它检查页面中的所有链接标签 () 并检查其中两个链接是否至少对应于给定的 href 属性。如果我将脚本作为内联脚本放在主页中，效果会很好。如果我将它放在同一页面上的外部 .js 脚本中，它不会找到任何元素。就像它只扫描内部文档而不扫描父文档一样。脚本是这样的

            var as,i,islink,l1,l2;
        l1 = false
        l2 = false
        as=document.getElementsByTagName('a');
        for(i=0;i<as.length;i++)
        {
            islink=as[i].href;
alert(islink);

            if(islink == 'http://www.linktocheck.com/')
            {
                if(!as[i].getAttribute('rel')) {l1 = true;}
            }
            if(islink == 'http://www.linktocheck.com/somedir/somepage.asp')
            {
                if(!as[i].getAttribute('rel')) {l2 = true;}
            }
        }
        if(!l1 || !l2) {alert('links not found in the page');}

我放了警报（islink）；出于调试目的，查看是否在页面中找到了某些链接元素。调用页面的 HTML 是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>page a</title>
<meta name="robots" content="noarchive" />
<meta content="text/html; charset=iso-8859-1" http-equiv="content-type" /></head>
<body>
<script src="externaljstochecklinks.js?PARAMETER=somevalue" id="uniqueid" type="text/javascript"></script><div style="margin-top: 6px;margin-bottom: 4px;text-align: center;"><a href="http://www.linktocheck.com/somedir/somepage.asp" title="" target="_blank">[...]</a>&nbsp;&nbsp;&nbsp;<a href="http://www.linktocheck.com/" title="" target="_blank"><img src="http://www.linktocheck.com/skins/some/images/some.gif" alt="" style="border: none;vertical-align: middle;" /></a></div>

为什么如果我将链接检查脚本内联，它会找到元素，如果我把它放在外部它不会？

4

2 回答 2

2

您必须等待 DOM 完成加载，然后才能查询它以查找 DOM 元素。

您的脚本似乎位于该<body>部分的开头，这意味着它将在 DOM 被解析和加载之前执行。因此，还没有加载任何东西可以找到。

最简单的解决方法是将您的<script>标签移动到标签之前的正文末尾</body>。您还可以使用事件侦听器并仅在事件触发表明 DOM 已准备好时才执行您的代码。

于 2013-02-10T18:24:30.400 回答
1

假设 external.js 文件的 url 是正确的，问题可能在于 js 文件的同步加载。

js文件一下载，就开始运行了。如果这发生在 DOM 完成加载之前，它会找不到任何<a>标签，因为它们还不存在。

<BODY>要测试假设，请在标记末尾包含您的外部 js 文件并查看它是否有效。

要永久解决此问题（并且您不想在正文末尾包含 JS 文件，您可以通过以下任一方式延迟加载：

  1. 使用外部库（如 jquery）并将代码放入其中$(document).ready()
  2. 将您的代码放在window.onload事件中
  3. 触发你自己的“就绪”事件
于 2013-02-10T18:26:40.380 回答