popup.html

Question

更新：

问题是由于包含旧版本的jQuery（1.4.2）引起的。在我使用1.8.2之后，问题就消失了。但我仍然没有知道原因。

我最近制作了Chrome扩展程序。感谢帖子chrome extension insert content script on browser action我意识到我必须包含一个js文件，如：

<script src="popup.js"></script>

但后来我发现你似乎不能包含多个文件：

<html>
  <head>
    <script src="jquery.js"></script> <!-- NOT LOADED -->
    <script src="popup.js"></script> <!-- LOADED -->
  </head>
  <body>
  </body>
</html>

对我来说更糟糕的是我无法访问JS文件中弹出HTML的DOM。像：

popup.html

<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <a id="intro" href="#"  target="_blank">Intro</a>
  </body>
</html>

popup.js

/*
  ... jQuery Codes here ... 
  jquery.js cannot be included via src="jquery.js" 
  but by copy and paste its source code here it works
*/
$("#intro").click(function(){
  alert("clicked"); // Not fireing at all
});

我想知道我能做些什么来解决这个问题。非常感谢！

Answer 1

以下是您可以使用它来使其工作的基本示例。我最好的猜测是，由于popup.js的设置方式（它正在尝试在元素加载之前附加click功能），因此只显示jQuery未加载。我不是JS专家，所以我相信其他人会更好地了解如何等待加载DOM，但这可以作为基本测试（注意：最新版本的jQuery（当前为1.8.2）的本地版本，因为清单2中的新内容策略不允许使用内联脚本）：

<强>的manifest.json

{
  "name": "Test Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Testing",

  "browser_action": {
    "default_icon":   "my_icon.png",
    "default_title":  "My Text Extension",
    "default_popup":  "popup.html"
  },

  "permissions": [
    "tabs", "http://*/", "https://*/"
  ]
}

<强> Popup.html

<html>
  <head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <a id="intro" href="#"  target="_blank">Intro</a>
  </body>
</html>

<强> Popup.js

/*
   Here we wait for the body of the popup to load before
   attaching our functionality
*/
window.onload = function() {
  $("#intro").click(function(){
    alert("clicked"); // Should fire now
  });
};

Answer 2

发生这种情况的原因是因为页面按顺序加载，脚本在加载DOM之前触发。这意味着在DOM存在之前调用脚本，因此它根本看不到DOM;它是在脚本之后加载的。

使用事件等待DOM是一种解决此问题的方法，但您也可以在端添加脚本或在最后加载body标记之后添加脚本，以便DOM是首先加载。当然，很多人会认为这是糟糕的做法，反之亦然。原因是您可能在DOM加载时加载脚本，或者因为有许多大型脚本会导致加载延迟，这些都是讨论jQuery操作网站时的有效点。

使用 Chrome扩展程序时，反对行为可能是有益的。一个原因是，即使使用最密集的扩展，也总是提供一些表示性响应，并且不必担心在代码中等待DOM。真的，这取决于你需要什么，但知道你所有的选择总是有益的。您可以在Sample Chrome Extensions中看到这两种做法。

使用 jQuery ，您可能希望使用Ready方法，因为onload会等到页面上的所有内容都被加载（图片，视频，链接，脚本等）。与onload不同，当DOM本身完成加载时调用ready方法，而不管页面实际上是否正在加载。你可以这样做：

$(document).ready(function() { 
  // jQuery code to execute after
});

您还可以使用DOMContentLoaded事件在 JavaScript 中等待DOM：

document.addEventListener('DOMContentLoaded', function() {
  // JavaScript code here
});

在Chrome扩展程序的popup.html中包含多个JavaScript文件

popup.html

popup.js

2 个答案: