jquery.ajax（）の読み込みページで実行されているスクリプトはドキュメントを実行します。

StackOverflow https://stackoverflow.com/questions/4073951

  •  28-09-2019
  •  | 
  •  

質問

私のサイトは使用していました jquery.load() ページの大きな塊でナビゲーションを行う。ロードされたコンテンツの特定の部分のみを含めることができることに本当に感謝しています。

$(frame_selector).load(url +" #content", function(response, status, xhr) {...});

しかし、今では、動的にロードされているページの一部であるスクリプトを実行できる必要があります。 Jquery.load() これらのスクリプトを取り除きますが jquery.ajax() そうではありません。したがって、の部分コンテンツ機能を複製しました jquery.load Ajax Calls os asなど：

$.ajax({
  url: url,
  dataType: 'html', 
  success: function(data, textStatus, XMLHttpRequest) {
      // Only include the response within the #content id element.
      $(frame_selector).html( jQuery("<div>")
            .append(data)
            .find("#content")
      );
  }
});

問題は、Ajaxコールから動的にロードされているスクリプトが確実に実行されていないことです。おそらく、彼らが早すぎて走っているからです。スクリプトは、jQueryでDOM操作を行っているだけです。画像やフラッシュなど、まだロードされていないものに依存していません。立ち往生しないようにするために、私は物事を機能させるためにこの恐ろしいハックを持っています。 Ajaxロードされたスクリプトの代わりに、次のことを使用するだけです。

$(document).ready( function() {...} );  // unreliable

実行する前に200msを遅らせる：

$(document).ready( window.setTimeout( function() {...}, 200 )); // HATE THIS

ハードコーディングを遅らせることなく、私がこの作業を確実に作る方法を誰かが知っていますか？私はそれが間の人種条件だと思います <script> そして、ロードする私の論理 #content 新しいdivになりますが、それについて何をすべきかわかりません。

役に立ちましたか？

解決

スクリプトは、Ajaxを介して追加したDOM要素を操作していると思います。

jQueryには isReady 一度に設定するプロパティ ready イベントはページにトリガーされています。

後続の呼び出し jQuery.ready(...) 最初にこれを確認します isReady 国旗。フラグがtrueに設定されている場合、すぐにハンドラーを呼び出します。これがコードに問題を引き起こす理由がわかります。

1つのオプションは、応答をjQueryフラグメントにロードし、すべてを解析することです。 <script /> 後で実行するためのタグ。

var ajaxResponse = $(html);
var scripts = ajaxResponse.find('script');

// Move your scripts into a new element
var tempScripts = $().append(scripts);

// Append your content, followed by your script tags
$(document).append(ajaxResponse);
$(document).append(tempScripts);

他のヒント

@danには答えがあります。 Ajaxを介してスクリプトをロードするときは、ドキュメントを使用します isReady 本当です。これは、これがajaxリクエストによって要求されるスクリプトタグである場合を意味します。

<script type="text/javascript">
    if (jQuery.isReady) {
        $('body').append("<div id='new_content'>Document Ready</div>");
    }
    else {
        $('body').append("<div id='new_content'>Document Not Ready</div>");
    }
</script>

解析する代わりに、JSONを利用します。 1つのプロパティがHTMLを保持します。別のプロパティがスクリプトを保持します。

その後、これを行うことができます：

$(document).append(ajaxResponse.html);
$(document).append(ajaxResponse.script);

また、コードを囲む準備ができた関数でスクリプトをロードすると、閉鎖が作成されます。この閉鎖は、ページの寿命を続けます。メモリリークは、ページを更新せずにそのスクリプトを要求するたびに作成されます

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top