onload js 功能在 Chrome 扩展中不起作用

Question

我在js中写了一个时钟函数，这个函数需要在body加载时启动（“onload”）。 功能基本没有问题。 但是当我使用 html 作为 Chrome 扩展程序运行代码时，该功能没有运行。

这是时钟函数：

function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML =
h + " : " + m ;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  
    return i;
}

这是 html

<body onload="startTime()">


    <script src="clockTime.js" type="text/javascript"></script>


        <div class="clockTimeBox" id="clock">

        </div>

</body>

也许我需要在清单中添加一些东西？

Answer 1

使用 Element.addEventListener 注册事件监听器。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

我最近使用 JavaScript 开发了一个带有时钟功能的 Chrome 扩展，事实上，我的代码和你的非常相似，在测试过程中，我遇到了和你一样的问题，我花了一些时间专门调试这个问题并得到时间功能正常工作，但这是我想出来的。

首先，我将指出明显的内联 JavaScript 不会被执行，这对于事件处理程序也是如此，因此，我显然在 Chrome 中运行我的 HTML 时遇到了问题。 我还想指出，我不需要在 Manifest.JSON 中添加任何额外的 JS 页面或澄清任何额外的内容（除了我的 HTML 文件，这是因为我只是覆盖了“newtab”）并且因为我目前没有运行任何“内容脚本”或“后台脚本”。

我只是运行一个 Html 文件，该文件将覆盖一个新标签页，该页上有一些 Javascript 函数。 在这种情况下，我为调试此问题所做的所有更新都在包含在 HTML 中的 JS 文件中（其中 Chrome 没有给我任何错误） 。

我做的第一件事是将以下代码添加到我的 JS 文件中，就在我的时钟函数上方（此时我只做了 2 个函数，一个函数只为时钟函数 setTimeout，另一个函数获取了日期、小时和分钟等又名“时钟功能”） 。

添加以下代码行允许我删除我的内联“onload”JS，它最初在我的 body 标签中被调用以“onload”我的 HTML 中的时钟函数。 （就像你上面提供的代码示例一样。）

document.getElementById('Insert id').Onload = () => your function();

然后我遇到了这个非常有用的Chrome 开发人员文档，它基本上说明了我们到目前为止所讨论的所有内容，但最重要的是，它提供了一个关于如何构建和处理加载、事件、setTimeout、addEventListener 和其他相关 JS 函数的不错示例.

我什至不需要添加“Element.addEventListener 来注册事件侦听器” （如上面的答案中所述） ，我所做的几乎是按照他们在文档中推荐的结构，通过本质上划分最初 setTimeout 的函数（对于“时钟函数”）到它自己的函数中，然后创建另一个函数，除此之外，该函数包含我上面最初谈到的两个函数（一个函数 setTimeout 和另一个函数获取日期、小时、和分钟等） 。 然后在函数的末尾，获取日期、小时和分钟等的时钟函数。我调用了一个新创建的函数，特别是我创建的包含这两个函数的函数。

（所以我创建了 2 个新函数，一个是 setTimeout，另一个只包含您拥有的两个函数。）

请参阅我下面的示例代码，这导致调试手头的问题。

（有点令人困惑，我知道，我自己对这些东西还是陌生的，但我强烈建议您查看 chrome 文档，因为他们可能会更好地解释它，但是，他们的示例特定于“clickHandler”和按钮。而我的示例特定于手头的问题。）

这是我的示例代码。

----Code that allowed me to remove "onload" inline JS from my HTML.
document.getElementById('bodie').onload = () => display_clock();

------ New function I created that includes both functions. (1)
function refresher() {
  display_c();
  display_clock();
}

-----New function I created that setTimeout. (2)
function updater (){
  setTimeout(display_clock, 1000);
}
----------function I "divied up" and commented out
// function display_c() {
//   var refresh=1000; //Refreshs in milli secounds
//   mytime=setTimeout('display_ct()', refresh)
// }
-------------------------
function display_clock() {
//Gets date and time information
var dt = new Date(); // This is variable
var hours = dt.getHours();
var minutes = dt.getMinutes();
var AmorPm = hours >=12 ? 'pm' : 'am';
hours = (hours % 12) || 12;
var finalTime = hours + ":" + minutes + " " +AmorPm;

document.getElementById('time').innerHTML = finalTime;
updater();

};