web-dev-qa-db-ja.com

jQuery .load（）呼び出しは、ロードされたHTMLファイルでJavaScriptを実行しません

これは、Safariのみに関連する問題のようです。 Macで4つ、Windowsで3つ試しましたが、まだ運がありません。

外部HTMLファイルを読み込んで、埋め込まれているJavaScriptを実行しようとしています。

私が使用しようとしているコードはこれです：

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html");
});

trackingCode.htmlは次のようになります（今は簡単ですが、一度拡張すると機能するようになります）。

<html>
<head>
    <title>Tracking HTML File</title>
    <script language="javascript" type="text/javascript">
        alert("outside the jQuery ready");
        $(function() {
            alert("inside the jQuery ready");
        });
    </script>
</head>

<body>
</body>
</html>

IE（6＆7）とFirefox（2＆3）の両方にアラートメッセージが表示されています。ただし、Safariでメッセージを表示することはできません（最後に気にする必要のあるブラウザ-プロジェクト要件-火炎戦争はありません）。

SafariがtrackingCode.htmlファイル内のJavaScriptを無視する理由についての考えはありますか？

最終的に、このtrackingCode.htmlファイルにJavaScriptオブジェクトを渡してjQuery readyコール内で使用できるようにしたいと思いますが、その道を進む前にすべてのブラウザーでこれが可能であることを確認したいと思います。

jqueryajaxsafari
80
Mike

Html、head、およびbodyタグを含むHTMLページ全体をdivにロードしています。ロードを実行し、ロードするHTMLに開始スクリプト、終了スクリプト、およびJavaScriptコードがある場合はどうなりますか？

ドライバページは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Load of Script</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.3.2");
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#myButton").click(function() {
                    $("#myDiv").load("trackingCode.html");
                });
             });
         </script>
    </head>
    <body>
        <button id="myButton">Click Me</button>
        <div id="myDiv"></div>
    </body>
</html>

TrackingCode.htmlの内容は次のとおりです。

<script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function() {
        alert("Inside the jQuery ready");
    });
 </script>

これはSafari 4で機能します。

更新：テスト環境のコードに一致するDOCTYPEおよびhtml名前空間を追加しました。 Firefox 3.6.13でテストされ、サンプルコードが動作します。

55
Tony Miller
$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});
39
xtds

ジョンピックのソリューション の別のバージョン、==直前、これは私のためにうまくいきます：

jQuery.ajax({
   ....
   success: function(data, textStatus, jqXHR) {
       jQuery(selecteur).html(jqXHR.responseText);
       var reponse = jQuery(jqXHR.responseText);
       var reponseScript = reponse.filter("script");
       jQuery.each(reponseScript, function(idx, val) { eval(val.text); } );
   }
   ...
});
23
Yannick

これはやや古い記事ですが、このページにアクセスして同様のソリューションを探している人には...

http://api.jquery.com/jQuery.getScript/

jQuery.getScript( url, [ success(data, textStatus) ] )

  • url-リクエストの送信先のURLを含む文字列。

  • success(data, textStatus)-要求が成功した場合に実行されるコールバック関数。

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});
13
ryan

HTMLフィールドを動的に作成された要素にロードしている場合、これは機能していないようです。

$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');

Firebug DOMを見ると、スクリプトノードはまったくなく、HTMLノードとCSSノードのみがあります。

誰もこれに遭遇しましたか？

9
tim

あなたはほとんどそれを持っています。スクリプトのみをロードするようjqueryに指示します。

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html script");
});
2
John Pick

TrackingCode.htmlでこれをテストします。

<script type="text/javascript">

    $(function() {

       show_alert();

       function show_alert() {
           alert("Inside the jQuery ready");
       }

    });
 </script>
2
Patrick Fritsch

HTMLロード機能用にjqueryプラグインを1つ作成しようとしました。次のリンクを参照してください。

http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

もっと改善することを提案してください。

ありがとう、モハン

2
Mohan

私はこれに遭遇し、そこでスクリプトが一度ロードされますが、繰り返し呼び出しはスクリプトを実行しませんでした。

.html（）を使用して待機インジケーターを表示し、その後に.load（）をチェーンすることに関する問題であることが判明しました。

// Processes scripts as expected once per page load, but not for repeat calls
$("#id").html("<img src=wait.gif>").load("page.html");

それらを別々に呼び出したとき、インラインスクリプトは予想どおり毎回ロードされました。

// Without chaining html and load together, scripts are processed as expected every time
$("#id").html("<img src=wait.gif>");
$("#id").load("page.html");

さらなる調査のために、.load（）には2つのバージョンがあることに注意してください

単純な.load（）呼び出し（URLの後にセレクターなし）は、dataType： "html"で$ .ajax（）を呼び出し、戻りコンテンツを取得し、.html（）を呼び出してそれらのコンテンツをDOMに入れるための単純な省略形です。 。また、dataType： "html"のドキュメントには、「含まれているスクリプトタグはDOMに挿入されると評価されます」と明記されています。 http://api.jquery.com/jquery.ajax/ したがって、.load（）は公式にインラインスクリプトを実行します。

複雑な.load（）呼び出しには、load（ "page.html #content"）などのセレクターがあります。このように使用すると、jQueryは次のような記事で説明されているように、スクリプトタグを意図的に除外します。 https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 =この場合、スクリプトは一度も実行されず、決して実行されません。

0
efreed

Firefoxでしか発生しないと思われる同じ問題があり、exisitng PHPファイルのフロントエンドを変更していたため、.load（）以外の別のJQueryコマンドを使用できませんでした...

とにかく、.load（）コマンドを使用した後、ロードされた外部HTML内にJQueryスクリプトを埋め込みましたが、動作しているように見えました。ただし、メインドキュメントの先頭に読み込んだJSが新しいコンテンツで機能しなかった理由がわかりません...

0
Victor G. Reano

$(document).ready()をwindow.onLoad()に変更することで、この問題を修正できました。

0
Casey Dwayne