2

私のサイトはpushStateを使用してページをロードしています。1つの問題があります。ページの1つでjavascriptを使用したいのですが、AJAXですべてをロードするため使用できません。だから私は何をしますか？「parseScript」について何か言われましたが、十分な情報が見つかりません。

- 例 -

AJAXを使用してロードします。私のページには次のスクリプトがあります。

<script type="text/javascript">
        function go(){
            alert('1');
        }
    </script>
<a href="javascript:void();" onClick="go();">GO!!!</a>

何も起こりません。

- 編集 -

Google Chromeのデバッガーを開いた場合：「UncaughtReferenceError：go is notdefined」そして、<script>タグが見つかりません

4

3 に答える 3

2

<script>ブラウザは、 経由でドキュメントに追加された要素のコンテンツを解析していないようですtargetElement.innerHTML。それはおそらくあなたが遭遇しているものです。

最善の解決策は、このような問題を解決するために jQuery のような十分にテストされたフレームワークを使用することです。彼らは、DOM にスクリプトを安全かつ正確に挿入する方法をすでに理解しています。ライブラリの帯域幅をどうしても確保できない場合を除き、一からやり直しても意味がありません。

これを修正する方法の 1 つは、Ajax 応答で JavaScript を HTML から分離することです。これは、2 つの要求を発行する (おそらく低速) か、JSON オブジェクト内で JavaScript と HTML を構造化する (おそらく保守が難しい) ことによって行われます。

次に例を示します。

<script>

function load_content(){
  var req = new XMLHttpRequest();
  req.open("GET", "ajax.json", true);
  req.onreadystatechange = function (e){
    if (req.readyState === 4){
      if (req.status === 200){

        // these three lines inject your JavaScript and
        // HTML content into the DOM
        var json = JSON.parse(req.responseText);
        document.getElementById("target").innerHTML = json.html;
        eval(json.js);
      } else {
        console.log("Error", req.statusText);
      }
    }
  };
  req.send(null);
}

</script>

<a href="#" onclick="load_content()">Load more stuff</a>
<div id="target"></div>

サーバー上のドキュメントajax.jsonは次のようになります。

{
  "js": "window.bar = function (){ console.log(\"bar\"); return false; }",
  "html": "<p><a href=\"#\" onclick=\"bar();\">Log a message</a></p>"
}

このルートを選択した場合は、次のいずれかを行う必要があります。

  • 関数の名前空間: MyApp.foo = function (){ ... };、または
  • 関数を明示的にグローバル名前空間に追加します: window.foo = function (){ ... };.

これはeval、現在のスコープで実行されるため、関数定義はそのスコープを継承し、グローバルに使用できないためです。私の例では、後者のオプションを選択しましたが、これは些細な例にすぎませんが、なぜこれが必要なのかを認識しておく必要があります。

JavaScript の eval() が悪ではないのはいつですか?を必ずお読みください。これを自分で実装することにした場合。

于 2012-02-11T18:24:06.457 に答える
0

Ajax 呼び出しがどのように行われ、コンテンツが読み込まれるかについて、もう少し詳しく説明すると役立つと思います。とはいえ、いくつかの注意事項があります。

  • javascript:void() の構文が無効です。javascript:void(0) である必要があります。さらに言えば、アンカータグの href で javascript:void() を使用することは、一般的に悪い習慣です。一部のブラウザではサポートされていません。タグを使用する必要がある場合は、href を # に設定し、「return false;」を追加します。クリックイベントへ。
  • とにかく、この場合は a タグの代わりにボタン タグを使用する必要があります。
  • あなたが提供したものを考えると、それはうまくいくはずです（void（）の構文エラーは別として）
于 2012-02-11T18:18:09.343 に答える
0

これを行う場合、jquery のロード呼び出しを使用します。これにより、ajax 呼び出しを設定し、script/no-script 要素のタグを解析できます。

jquery を使用したくない場合は、オンラインで jquery ロード メソッドの機能を見つけ、ajax 呼び出しのイベント ハンドラーと同じものを実装することをお勧めします。

于 2012-02-11T18:40:18.553 に答える