如何在继续使用 Javascript 之前完全加载页面？

Posted 2023-02-19

【中文标题】如何在继续使用 Javascript 之前完全加载页面？

【英文标题】：How to load page completely before proceeding with Javascript?

【发布时间】：2022-01-22 10:05:43

【问题描述】：

对不起，如果标题有点难以理解。请允许我详细说明。

在我的 Wordpress 网站上，我最近开始使用扩展自定义字段套件，以便能够创建自定义字段。它允许我之后在 html 中检索这些内容，因此如果我需要更改文本，我可以直接在 Wordpress 上进行，而不必每次都提取 html 文件并重新上传它们。

今天我在做一些 javascript，我需要检索来自这些自定义字段之一的文本。基本上检索这样的东西：

<h1 class="title"><?= CFS()->get('title'); ?></h1>

所以，我想做的是使用QuerySelector 并将.title 类检索到变量中，如下所示：

let sentence = document.querySelector(".title");

唯一的问题是它返回undefined，我想我知道为什么。当我加载页面然后进入控制台并准确输入时，它可以工作，这让我相信我的 Javascript 检索标题的速度比CFS()->get 返回的时间要快。

我现在的问题是我不知道如何才能使我的标题及时加载以供 Javascript 继续执行，所以我想知道是否有人有想法。

提前致谢

【参考方案1】：

可以使用Javascript的window.onload函数：

window.onload = function() 
    alert('Page is loaded');
;

或者你可以使用事件监听器：

window.addEventListener("load", function() 
    alert('Page is loaded');
);

请务必将您的 js 放入函数中。请注意，这是众多可能性之一，因此您一定可以研究更多选项。

【讨论】：

这很容易解决，老实说，我不知道为什么或如何我自己找不到这个。真的很抱歉，谢谢你的麻烦！