页面加载后的 Javascript 运行函数答案

【问题标题】：Javascript Run Function After Page Load页面加载后的 Javascript 运行函数
【发布时间】：2011-11-05 21:59:51
【问题描述】：

我正在尝试在 Javascript 中创建一个小型自动化脚本，我想使用 Opera 的用户脚本功能在站点上运行该脚本来定义要运行的外部脚本。我之前使用过这个功能来运行我用外部网站编写的脚本，效果很好。

我需要等到页面加载后才能运行脚本，但我似乎无法让它工作。目前的代码是：

if (addEventListener in document) { // use W3C standard method
    document.addEventListener('load', meerfirst(), false);
} else { // fall back to traditional method
    document.onload = meerfirst();
}

function meerfirst(){
    nameForm = document.forms['aspnetForm'];
    nameForm.elements('ctl00$CPH1$NewQuoteView$TitlesView$DropDownListTitles').value = 'MR:TRUE:MR';
    nameForm.elements('ctl00$CPH1$NewQuoteView$TextBoxFirstName').value = 'James';
 }

这是我自己的函数，加上通过另一个问题在这里找到的 if 语句。我也试过window.onload，但还是不行。

奇怪的是，Opera 似乎并没有真正执行脚本，就好像我在 if 语句上设置了一个断点，它实际上从未中断过它。该站点是否可以内置反用户脚本功能？还是有可能我做错了什么来阻止这个执行？

【问题讨论】：

它立即调用 meerfirst，而不是加载。见这里：jsfiddle.net/ThinkingStiff/6ajFz。删除括号，如下所述的@missingo。它似乎没有调用 meerfirst，因为 nameForm 在页面加载之前第一次调用它时返回 undefined。

标签： javascript opera onload

【解决方案1】：

将函数本身作为回调传递

addEventListener('load', meerfirst, false);
                  // no parens! ^^

通过放置括号，您可以立即（在加载之前）调用函数并将其（无用的、非函数的）返回值传递给 addEventListener。

顺便说一句，既然您已经知道将在哪个浏览器上使用该代码，那您为什么要在一开始就进行该功能测试？

【讨论】：

【解决方案2】：

这段代码有几个问题：

if (addEventListener in document) { // use W3C standard method
    document.addEventListener('load', meerfirst(), false);
} else { // fall back to traditional method
    document.onload = meerfirst();
}

您需要在 if 语句中为 addEventListener 加上引号。您正在document 中寻找属性名称，因此名称必须是字符串：if( 'addEventListener' in document )
您希望在 addEventListener 语句中按名称引用函数，而不是立即调用它。您应该删除括号 - 仅使用 meerfirst 而不是 meerfirst()。
分配给 document.onload 无效。请参阅我对window.onload vs document.onload 的回答并改用 window.onload。
将赋值更改为 window.onload 后，您还需要删除括号。同样，您只是按名称引用函数，并且不希望此时实际调用它。
最后，我建议收听DOMContentLoaded 而不是load - 除非您要运行一些需要等到所有图像加载完毕的代码。

【讨论】：

我还建议将var 放在定义名称格式的第一行前面。这使得“nameform”成为局部变量而不是全局变量。

【解决方案3】：

试试：

window.onload = function() 
{

meerfirst();

};

【讨论】：

我之前尝试过 window.onload 方法，但无济于事。正如上面的评论中提到的，我越来越多地认为这与脚本从未被执行有关，这提出了为什么，
@missingno 提到的括号是您的 addEventListener 调用的问题。

【解决方案4】：

您的答案很好地嵌套在 O'Reilly 的“Javascript：权威指南”中

// Register the function f to run when the document finishes loading.
// If the document has already loaded, run it asynchronously ASAP.
function onLoad(f) {
    if (onLoad.loaded) // If document is already loaded
        window.setTimeout(f, 0); // Queue f to be run as soon as possible
    else if (window.addEventListener) // Standard event registration method
        window.addEventListener("load", f, false);
    else if (window.attachEvent) // IE8 and earlier use this instead
        window.attachEvent("onload", f);
}
// Start by setting a flag that indicates that the document is not loaded yet.
onLoad.loaded = false;
// And register a function to set the flag when the document does load.
onLoad(function() { onLoad.loaded = true; });

这不仅会在浏览器完成加载时运行，而且还会处理跨浏览器的差异。享受:)

【讨论】：