2

Optimizelyguiders.jsのサンプルコードを使用しています。

http://jeffpickhardt.com/guiders/

JavaScriptコードを抽出して別のファイルに配置すると、ガイダーが読み込まれません。

編集されたHTMLは次のとおりです。

<html>
  <head>

    <!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="guider.js"></script>
    <script type="text/javascript" src="guidedTour.js"></script>

    <link rel="stylesheet" href="guider.css" type="text/css" />
  </head>
  <body>
    <span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
      <br />
      <img src="clock.gif" width=150 height=150 />
    </span>


  </body>
</html>

すべてのJavaScriptコードがguidedTour.js同じディレクトリにあります。すべての.jsファイルも同じディレクトリにあります。そして、コードは別のファイルに抽出する前に機能しました。

JavaScriptが別のファイルにある場合、ガイダーはロードされません。

Chromeで次のエラーが発生します。

「キャッチされていないTypeError：nulljqueryのプロパティ「clientHeight」を読み取れません-1.5.1.min.js：16」

より新しいバージョンのjQueryを試してみると、でエラーがスローされguiders.jsます。とにかく、JavaScriptコードをに保持する場合とは異なる動作のようですindex.html。

動作するコード用にjsfiddleを作成しました：http： //jsfiddle.net/vpMQy/

問題を再現できるように、JavaScriptを使用して同様のjsfiddleを別のファイルに作成する方法がわかりません。

このJavaScriptコードを別のファイルに入れることは可能ですか？

4

1 に答える 1

13

常にDOMレディハンドラー内にコードをラップします

$(document).ready(function() {
    //your code here
});

またはその速記

$(function() {
    //your code here
});

または、ドキュメントの最後にスクリプトを配置しますbody。

    //...
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="myScript.js"></script>
 </body>

また、準備が整う前にDOMを操作する際に問題が発生することはありません。=]

于 2012-08-14T11:55:13.470 に答える