Question

我在js中写了一个时钟函数，这个函数需要在加载正文时启动（＆＃34; onload＆＃34;）。该功能基本上没有任何问题。但是，当我使用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 （除了HTML文件之外）中添加任何额外的JS页面或澄清任何其他内容，这是因为我只覆盖了“ newtab”），因为我当前未运行任何“内容脚本”或“后台脚本”。

我只是运行一个Html文件，它将覆盖New Tab页面，该页面上发生了一些Javascript函数。在这种情况下，我为调试此问题而进行的所有更新都全部包含在HTML （Chrome并未给我提供任何错误）中包含的JS文件中。

>

我做的第一件事是将以下代码添加到我的时钟函数上方的JS文件中（此时，我仅创建了2个函数，一个函数仅将setTimeout用于时钟函数，而另一个函数得到了日期，小时和分钟等（又称“时钟功能”）。

添加以下代码行使我可以删除我的内联“ onload” JS，该内联JS最初是在body标记中调用的，以“ onload” HTML中的clock函数。 （与您上面提供的代码示例完全一样。）

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

然后我遇到了这个非常有用的Chrome Developer doc 基本上说明了到目前为止我们所讨论的所有内容，但是最重要的是，它提供了一个有关如何构造和处理onload，事件，setTimeout，addEventListener和其他相关JS函数的不错的示例。

我什至不需要添加“ Element.addEventListener来注册事件监听器” （如上面的答案中所述），我所做的几乎都遵循他们在文档中建议的结构，基本上是将最初将setTimeout （用于“时钟功能”）的功能划分为自己的功能，然后除了该功能之外还创建另一个功能，该功能包括我最初的两个功能上面讨论过（一个函数setTimeout，另一个函数获取日期，小时和分钟等）。然后在函数的最后，输入获取日期，小时和分钟等的时钟函数。我调用了一个新创建的函数，特别是我创建的包含这两个函数的函数。

（因此，我创建了2个新函数，其中一个setTimeout函数，另一个仅包含您拥有的两个函数。）

请在下面查看我的示例代码，这将调试当前的问题。

（Kinda令人困惑，我知道，我本人还是这个新手，但是我强烈建议您查看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();

};

onload js函数在chrome扩展中不起作用

2 个答案: