Question

现在我正在尝试运行以下代码，但控制台永远不会记录＆＃39;添加＆＃39;，仅启动＆＃39;。

var addWebsiteAddress;
console.log('started');

document.addEventListener('DOMContentLoaded', function(){
  console.log('added');
  addWebsiteAddress = document.forms["addWebsiteAddress"];
  addWebsiteAddress.addEventListener('submit', addWebsite);

我已将其放在HTML文件中，如下所示：

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="popup.js" async></script>
    <title>Add a website to block</title>
  </head>
  <body>
    <form id="addWebsiteForm">
    Website Address: <input type="text" id="websiteAddress"><br>
    <input type="submit" value="Add Website">
    </form>
  </body>
</html>

我错过了什么？ DOMContentLoaded似乎永远不会触发，因为我也无法注册提交事件。

Answer 1

此处的罪魁祸首是您正在使用的async属性。

通常，将<script>标记添加到DOM时，浏览器将暂停解析页面以执行脚本。使用async时，不能保证这种情况。它可以在任意点执行。

您的网页非常小。浏览器几乎立即对其进行解析，并在事件发生之前触发事件并记住＆＃34;执行你的脚本 - 因此你的脚本没有收到它。

async背后的想法是不要在脚本本身加载的情况下偶然发现页面加载。由于Chrome扩展程序中的资源都是本地资源，因此加载时间不是一个因素，因此您不应该使用它，选择更可预测的程序流。

Answer 2

也许您在 manifest.json 中设置“run_at”：“document_end”。将“run_at”：“document_end”更改为“run_at”：“document_start”。有用！我试过了！

Chrome扩展程序DOMContentLoaded未触发

2 个答案: