Question

我正在开发的网站上有一个简单的旋转横幅javascript。它可以在IE，Firefox和Safari上本地完美运行，但不能在Chrome上运行。我的代码有问题吗？我是Javascript的新手，所以这个问题让我很困惑。这是相关的代码：

<script language="Javascript" type="text/javascript">
    adImages = new Array
    ("images/AMSite18.png","images/AMSite19.png","images/AMSite09b.png")
    thisAd = 0
    imgCt = adImages.length

    function rotate() {
        if (document.images) {
            thisAd++
            if (thisAd == imgCt) {
                thisAd = 0
            }

            document.adBanner.src=adImages[thisAd]
            setTimeout("rotate()", 3 * 1000)
        }
    }
    </script>
</head>

<body onload="rotate()">
    <div id="banner">
        <img src="images/banner1.gif" name="adBanner" alt="Ad Banner" />
    </div><!-- end banner -->
</body>

Answer 1

看起来它在Chrome中不起作用的原因就是这一行：

document.adBanner.src=adImages[thisAd]

您通过document.adBanner引用名为“adBanner”的元素，但Chrome doesn't support that。你必须使用这样的东西：

document.getElementsByName('adBanner')[0].src = adImages[thisAd];

其他一些可以提高代码质量的事情：

请勿使用language属性。不需要。
使用格式var x = [...];创建新数组。没有理由使用构造函数格式。一个都没有。 Zippo的。没有人可以对此答案发表评论，理由是您使用new Array(...)代替。没有人。
使用var关键字创建变量，使用分号结束语句。虽然这里没有任何损害，但如果不使用var，然后JavaScript假设您正在创建/更改全局变量，而这可能不一定是这种情况。（此外，分号规则可能有点复杂，但它确实有助于提高可读性。）
为什么要检查document.images？这是不必要的。你不会在其他任何地方引用它。
Crockford建议使用x += 1代替x++。没什么大不了的，很多人不同意，只是我注意到了。
始终使用严格相等（===）。您使用的类型（==）不会考虑类型; 2 == "2"将返回true，但2 === "2"不会。再说一次，并不是什么大不了的事，有些人并不在乎，但是在以后的某个项目中它可能会让你感到厌烦。
永远不要将字符串传递给setTimeout。浏览器只会破坏字符串，而且没有人会与eval填充内容的人闲聊。你甚至不需要需要来传递一个字符串，因为你正在使用一个不需要任何参数的函数！只需使用：
```
setTimeout(rotate, 3 * 1000);
```
尝试将脚本标记放在正文的底部。这有两个原因。首先，表现。当浏览器访问您的脚本时，它会停止所有来解析并执行代码。如果你把它放在身体的底部而不是头部，页面至少会显得加载更快。接下来讨论第二点：
尽量避免使用onload。这只是个笨蛋。您需要的原因是因为您的脚本处于首位，并且还没有访问DOM的权限。但是如果那个脚本被移到了身体的底部（由于某种原因，你可能无法做到这一点;没什么大不了的），你根本不必弄乱onload：
```
<body>
    <div id="banner">
        <img ... />
    </div>

    <script>
    // Copy all of your code exactly the same,
    // and then:

    rotate();
    </script>
</body>
```
为了爱上帝，不要使用name属性。对于表格，谁在乎？但是当您使用JavaScript操作元素时，请使用id。很明显你正在做什么，document.getElementById('adBanner')比document.getElementsByName('adBanner')[0]更快。

enter image description here

Answer 2

首先应该修复语法问题。

行应以分号;结尾，变量应使用var声明，并且应使用[]而不是新数组，将函数传递给setTimeout而不是一个字符串

var adImages = ['images/AMSite18.png','images/AMSite19.png','images/AMSite09b.png'];
var thisAd = 0;
var imgCt = adImages.length;

function rotate() {
    if (document.images) {
        thisAd++;
        if (thisAd == imgCt) {
            thisAd = 0;
        }

        document.adBanner.src=adImages[thisAd];
        setTimeout(function(){
           rotate();   
        }, 3 * 1000);
    }
}

这可能无法解决，但你应该这样做：）

Answer 3

我刚刚在Mac上的Chrome 11上运行了代码并且它运行正常。即使有语法错误。但保罗是对的，你应该总是写有效的JavaScript。

这也是传递函数的更好方法

setTimeout(rotate, 3 * 1000);

我的Javascript适用于IE FF＆amp; Safari，但不是Chrome

3 个答案: