2

更新：

该问题是由包含旧版本的 jQuery(1.4.2) 引起的。在我改用 1.8.2 之后，问题就消失了。但我仍然不知道为什么。

我最近做了一个 Chrome 扩展。感谢浏览器操作上的 post chrome 扩展插入内容脚本，我意识到我必须包含一个 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
});

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

4

2 回答 2

1

这是一个基本示例，说明您可以使用它来使其正常工作。我最好的猜测是，由于您popup.js的设置方式（它试图click在元素加载之前附加功能），它似乎没有加载 jQuery。我不是 JS 专家，所以我相信其他人会对如何等待DOM加载有更好的想法，但这只是一个基本测试（注意：这使用了最新版本 jQuery (1.8.x) 的本地版本。 2 当前），因为清单 2 中的新内容策略不允许内嵌脚本）：

清单.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://*/"
  ]
}

弹出窗口.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
  });
};
于 2012-10-22T03:22:38.850 回答
0

发生这种情况的原因是因为页面正在按顺序加载，并且脚本在 DOM 加载之前触发。这意味着脚本在 DOM 存在之前就被调用了，所以它根本看不到 DOM；它在脚本之后加载。

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

在使用Chrome 扩展程序时，相反的做法可能是有益的。一个原因是始终提供一些代表性响应，即使是最密集的扩展，也不必担心在代码中等待 DOM。实际上，这取决于您的需求，但了解所有选项总是有益的。您可以在Sample Chrome Extensions中看到这两种做法。

使用jQuery，您可能希望使用Ready方法，因为onload会等待页面上的所有内容（图像、视频、链接、脚本等）加载完毕。与 onload 不同，ready 方法在 DOM 本身完成加载时调用，而与实际加载的页面无关。你可以这样做： 

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

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

document.addEventListener('DOMContentLoaded', function() {
  // JavaScript code here
});
于 2016-12-03T20:29:38.543 回答