logo标签列表

Chrome扩展程序中的DOMContentLoaded事件未触发

javascripthtmlgoogle-chromegoogle-chrome-extension
4

我现在正在尝试运行以下代码，但控制台从未记录“已添加”，仅记录“已启动”。 

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似乎从未触发，因此我也无法注册提交事件。

如果您删除 async 关键字会发生什么？ - Xan
哦，它可以工作。虽然我不明白为什么 - 我以为异步只是从网页加载中单独运行脚本。 - Eric Gao
2个回答
4
罪魁祸首是您正在使用的“async”属性。
通常，将<script>标记添加到DOM时，浏览器会暂停解析页面以执行脚本。但使用async时，并不能保证这一点。它可能在任意时间执行。
您的页面非常小。浏览器几乎立即解析它，事件在“记住”执行您的脚本之前触发，因此您的脚本无法接收到该事件。 async的想法不是在脚本本身加载时遇到页面加载问题。由于Chrome扩展中的资源都是本地的，因此加载时间不是一个影响因素，因此您不应使用它，而应选择更可预测的程序流程。
1
也许你在 manifest.json 中设置了 "run_at": "document_end"。 将 "run_at": "document_end" 更改为 "run_at": "document_start"。 它有效！我尝试过了！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接