2

アップデート：

この問題は、古いバージョンのjQuery（1.4.2）が含まれていることが原因で発生します。代わりに1.8.2を使用した後、問題はなくなりました。しかし、私はまだ理由がわかりません。

最近Chrome拡張機能を作成しました。ブラウザアクションでの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

Here is a basic example of what you could use to get it working. My best guess is that it only appeared that jQuery wasn't loading because of how your popup.js is set up (it is trying to attach the click functionality before the element has loaded). I'm no JS expert, so I'm sure others will have better ideas of how to wait for the DOM to load, but this works as a basic test (NOTE: this uses a local version of the latest version of jQuery (1.8.2 currently), as the new content policies in manifest 2 do not allow in-line scripts):

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
  });
};
于 2012-10-22T03:22:38.850 に答える
0

The reason this is happening, is because the page is being loaded in order, and the scripts are firing before the DOM is loaded. This means that the scripts are called before the DOM even exists, so it cannot see the DOM at all; it's loading after the script.

Using events to wait for the DOM is one method to get around this, but you can also add the scripts at the end or after the body tag to be loaded last, so that the DOM is loaded first. There are of course many people who will argue this is bad practice, as well as vice versa. The reason being that you may have scripts load while the DOM loads, or because there are many large scripts that cause a lag in the loading, and these are all valid points when discussing jQuery manipulated websites.

The opposing practice can be beneficial when working with Chrome Extensions. One reason is to always give some representational responsiveness, even with the most intensive extensions, as well as not having to worry about waiting for the DOM in the code. Really it depends on what you need, but it's always beneficial to know all of your options. You can see both practices used in the Sample Chrome Extensions.

With jQuery you may want to use the Ready method instead, as onload waits until everything on the page is loaded (images, video, links, scripts, etc). Unlike onload, the ready method is called when the DOM itself is done loading, regardless of the page actually being done loading. You can do this with: 

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

You can also wait for the DOM in JavaScript using the DOMContentLoaded event:

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