现在我正在尝试运行以下代码，但控制台从未记录“已添加”，仅记录“已启动”。
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您正在使用的属性。
通常，在添加 <script> 时标记到 DOM，浏览器将暂停解析页面以执行脚本。与 async , 不能保证是这种情况。它可以在任意点执行。
您的页面非常很小。浏览器几乎立即对其进行解析，并在它“记住”执行您的脚本之前触发事件 - 因此您的脚本不会接收到它。
背后的想法async不要在加载脚本本身时绊倒页面加载。由于 Chrome 扩展程序中的资源都是本地的，加载时间不是一个因素，因此您不应该使用它，选择更可预测的程序流程。
关于javascript - Chrome 扩展 DOMContentLoaded 未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24832990/