2

行をキャッシュしてオフページを追加する無限スクロールルーチンを構築しています。

$.get行を追加して、$('<div/>')新しい行が必要なときはいつでも、そのdomからページに行を追加します。

domに追加すると、jqueryがスクリプトタグを取り除き、javascriptを実行することを読みました。

jqueryがスクリプトを実行するとき、要素はメインページのdomではなく、オフページのdomにあるため、これは私にとって問題を引き起こしているようです。

ページにオフページ要素を追加したときにスクリプトが実行されるように、スクリプトを保持するにはどうすればよいですか？

アラートを追加しましたが、オフページのDOMまたは実際のページのDOMに追加するときに、JavaScriptがまったく実行されないようです。そのため、問題が発生する前に失敗している可能性があります。

新しい行を取得してページ外のdomに配置するコード：

var nextPageDOM = $('<div/>');
var jqxhr = $.get(data.nextPageURL, function(nextPageHTML) {
    nextPageDOM.html($(nextPageHTML).find(data.settings.pagedContent));

    // Get the elements to add to the page
    data.nextPageElements = nextPageDOM.find(data.settings.rowSelector);
}

オフページDOMからページに追加するコード：

var elementToAdd = data.nextPageElements.first().clone();
$(data.settings.pagedContent).append(elementToAdd);
4

4 に答える 4

3

多くの変数がどこを指しているかわからないまま解決するのは非常に難しいため、data.settings.pagedContent がページ上の DOM を指していると仮定すると、ajax 応答で既に持っているものと等しい要素だけを見つけるのはなぜでしょうか? 一方、 data.settings.pagedContent がセレクターである場合、スクリプトがセレクターの外に出ているかどうか疑問に思っています。ajaxresponse の例を提供すると非常に役立ちます。

とにかく、jQuery スクリプトの削除を回避する方法を探している場合は、次のことを行うことができます: セカンダリ div コンテナーを作成する

var $cont = $("<div/>");

innerHTML を介して ajax 応答を挿入します (整形式であることを願っています)。

$cont[0].innerHTML = nextPageHTML;

次に、$cont からスクリプトを選択して保存します

$scripts = $cont.find("script");

スクリプトを抽出したので、同じ方法でキャッシュを続行できますが、html とスクリプトを別々に処理できます。ページ上の DOM で HTML を取得したい場合は、スクリプトも追加します。 DOM。

コメントではなく、ここで説明を求めて申し訳ありませんが、私には十分な評判がありません。

編集(2013-01-22)

jQuery 2.0 アップグレード ガイドから、jQuery 2.0 ベータ版 (jQuery 1.9 が古い動作を継続する最後のバージョンになります) に実装されたスクリプト タグ解析の処理に関する jQuery コア機能のニュース

HTML コンテンツ内のスクリプトの読み込みと実行

1.9 より前では、HTML を受け入れるメソッド (例: $()、.append()、または .wrap()) は、HTML 内のスクリプトを実行し、ドキュメントからそれらを削除して、再度実行されないようにしていました。これは、スクリプトが削除され、.wrap() などのメソッドを使用してドキュメントに再挿入される可能性がある状況では依然として壊れていました。1.9 の時点で、ドキュメントに挿入されたスクリプトは実行されますが、ドキュメントに残され、実行済みとしてタグ付けされるため、削除して再挿入しても再度実行されることはありません。

この変更にもかかわらず、実行可能な JavaScript を HTML マークアップに混在させることは非常に不適切です。設計、セキュリティ、信頼性、およびパフォーマンスに影響します。たとえば、HTML に含まれる外部スクリプト タグは同期的に取得されてから評価されますが、これにはかなりの時間がかかる場合があります。これらのスクリプトがいつ読み込まれるかどうかを通知したり、エラーが発生したときに修正アクションを実行したりするためのインターフェイスはありません。

既存のスクリプト タグのクローンを作成し、そのクローンをドキュメントに挿入することによってスクリプトをロードしようとするコードは機能しなくなります。これは、クローンされたスクリプト タグが既に実行済みとしてマークされているためです。新しいスクリプトをロードするには、代わりに jQuery.getScript() を使用してください。

于 2012-09-21T10:37:43.037 に答える
1

私が理解したように、問題は動的にロードされたスクリプトが実行されていないことです。SO に関する次の投稿を見つけました。ソリューションによると<script>、既存の DOM 要素に追加されたタグが実行されていないため、新しい要素を作成してスクリプトを追加し、その要素を必要な場所に追加する必要があります。

于 2012-09-21T10:48:50.640 に答える
0

スクリプトを実行したい場合は、スクリプトのコンテンツを取得してから eval を使用するか (推奨されません)、jQuery でスクリプト タグを作成し、タグにスクリプトを挿入すると、自動的に実行されます。

var nextPageDOM = $('<div/>');
var jqxhr = $.get(data.nextPageURL, function(nextPageHTML) {
    nextPageHTML =  stripScripts(nextPageHTML );  // remove the script tag ;)
    nextPageDOM.html($(nextPageHTML).find(data.settings.pagedContent));

    // Get the elements to add to the page
    data.nextPageElements = nextPageDOM.find(data.settings.rowSelector);
}

この関数は、html 文字列からすべてのスクリプトを取得します

function getScripts(text) {
       var SCRIPT_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
         text = text.match(SCRIPT_REGEX);
        return test;   // you can use eval to execute the script or you can crete a script tag and insert the script in the tag and it will get executed
      }

ページ内のデモ スクリプト

`<scr<script>Ha!</script>ipt> alert(document.cookie);</script>`

この関数はそれらをすべて削除します 

   function stripScripts(text) {
       var SCRIPT_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
       while (SCRIPT_REGEX.test(text)) {
         text = text.replace(SCRIPT_REGEX, "");
        }
      return test
      }
于 2012-09-21T10:49:33.723 に答える
0

その代わり$.ajax({... datatype:script ...})に$.get(...)、必要なすべての js を実行できます。もちろん、この js の写真内で、ページの表示部分を追加するコードを使用します。

ページ側: 

$.ajax({url:data.nextPageURL, datatype:script, data:relevant_data_map,});

サーバーの応答時 (タグが存在してはならないことに注意してください):

alert('this is running');                        // or whatever
var nextPageDOM = $('<div/>');
nextPageDOM.html('this is from the server');     // or whatever
$(nextPageDOM).insertBefore("#end_of_content_mark");
于 2012-09-21T21:51:11.337 に答える