Question

我想知道是否有一种方法只在第一次页面加载时执行一次JavaScript函数，然后在任何后续重新加载时都不执行。

有没有办法可以做到这一点？

Answer 1

onload事件触发后，将执行以下代码。该语句通过使用标志（hasCodeRunBefore）检查if 一次性函数之前已执行 NOT ，然后将其存储在{ {3}}。

window.onload = function () {
    if (localStorage.getItem("hasCodeRunBefore") === null) {
        /** Your code here. **/
        localStorage.setItem("hasCodeRunBefore", true);
    }
}

注意：如果用户以任何方式清除其浏览器“localStorage，则该函数将再次运行，因为该标志（hasCodeRunBefore）将被删除。” / p>

好消息......

由于运算符和冗长的函数名称，使用localStorage 可能会非常繁琐。我创建了一个基本的localStorage来简化这个，所以上面的代码将替换为：

window.onload = function () {
    if (!ls.exists('has_code_run_before')) {
        /** Your code here... **/
        ls.set.single('has_code_run_before', true);

        /** or... you can use a callback. **/
        ls.set.single('has_code_run_before', true, function () {
           /** Your code here... **/ 
        });
    }
};

更新＃1

每module，您可以使用@PatrickRoberts comment运算符查看localStorage中是否存在变量键，所以

if (localStorage.getItem('hasCodeRunBefore') === null)

变为

if (!('hasCodeRunBefore' in localStorage))

并且更简洁，更清洁。

其次，您可以像对象（localStorage.hasCodeRunBefore = true）一样设置值，尽管它将作为字符串存储，而不是布尔值（或者您的值是什么数据类型）。

Answer 2

每次加载页面时都必须执行所有JavaScript。如果脚本在页面上，它将执行。

在页面中包含的JavaScript中执行的逻辑可以以不同的方式执行，具体取决于页面状态，提供的输入以及它接收的任何其他信号，无论是来自服务器还是客户。

如果您使用的是服务器端语言，则可以选择有条件地呈现脚本，例如用户首次登录时。

如果您需要包含javascript而不考虑上下文，那么您需要收听其他信号。

简单的现代解决方案是使用localStorage。 localStorage可用于在任何给定域的自定义键值上存储自定义字符串值。

使用它的代码如下所示：

if (localStorage['...my key here...'] === '...my expected value here...') {
    // The page has been visited before
} else {
    // The page has not been visited before
    // OR
    // The user or script has cleared the localStorage value
}
localStorage['...my key here...'] = '...my expected value here...';

如果你只是需要在客户端工作的东西，这一切都很好。有时您可能需要服务器知道之前是否访问过该页面。

（较少）简单的解决方案是使用document.cookie：

if (/(?:^|;\s*)...my key here...=...my expected value here...(?:;|$)/.test(document.cookie)) {
    // the page has been visited before
} else {
    // The page has not been visited before
    // OR
    // The user or script has cleared the cookie
}
document.cookie = '...my key here...=...my expected value here...';

如果您需要将执行推迟到页面加载完毕，那么只需将脚本包含在onload回调中，方法是将事件分配给窗口：

window.onload = function () {
    // do stuff when the page has loaded
    //this will override any other scripts that may have been assigned to .onload
};

或通过将事件处理程序绑定到窗口：

window.addEventListener('load', function () {
    // do stuff when the page has loaded
}, false);

Answer 3

＆＃13;

function toBeExecutedOnFirstLoad(){
  // ...
}
if(localStorage.getItem('first') === null){
  toBeExecutedOnFirstLoad();
  localStorage.setItem('first','nope!');
}

＆＃13;

Answer 4

这取决于第一页加载对您意味着什么。这是主观的。

如果您希望在解析DOM后触发该函数，但只需要HTML而不是其他外部资源，请将其绑定到DOMContentLoaded事件。

document.addEventListener('DOMContentLoaded', fn);

否则，如果您要等待加载外部资源然后触发事件，则应将其绑定到window对象的load事件，如下所示：

window.addEventListener('load', fn);

以下是Mozilla开发者网络的一些链接，它们解释了我刚才所说的内容：

https://developer.mozilla.org/en-US/docs/Web/Events/load

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

祝你好运！

Answer 5

我遇到了类似的情况，我的情况不同的是，我想在创建新实例时运行代码，我需要执行特定的代码，然后对于其余的重新加载代码不应该执行。对于类似于上面的 localStorage 解决方案，请改用会话存储：

fun_RunOnlyOnFirstPageLoad(){}
if(!$window.sessionStorage.getItem(hasRunBefore)){
   fun_RunOnlyOnFirstPageLoad();
   $window.sessionStorage.setItem(hasRunBefore, true);
}

使用 window.sessionStorage 代替仅存储该会话的值。这样，一旦选项卡关闭（会话结束，该值被清除）并且在每次新实例化时，代码都会执行。

如何在第一页加载时执行JavaScript函数？

5 个答案:

好消息......

更新＃1