9

以下の方法を使用して、リモートページをページ上のdivにロードしています。

$('#result').load('www.myurl.com/results.html');

興味がありますが、完全にフォーマットされたHTMLページを別のページにロードするのは悪い習慣ですか？私の懸念は、プライマリページの他の要素を上書きする可能性のあるcssまたは追加のjavascriptインクルードをロードすることです。

最初のテストで問題は発生していません。これがベストプラクティスかどうかはわかりません。

明確にするために：私がそのようなプライマリページを持っている場合

<html>
    <head>
       <script src="jquery.js"></script>
       <link href="mycss.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <div id="remoteContainer"></div>
       <script>
          $('#remoteContainer').load('www.myurl.com/results.html');
       </script>
    </body>

そして、次のようなresults.htmlコード：

<html>
    <head>
       <script src="jquery.js"></script>
       <link href="myResults.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <header>        
           <h1>My Results Page</h1>
       </header>
       ...
    </body>

CSSとJSは相互に上書きしますか、それともページは2つの別個のエンティティとして機能しますか？

4

3 に答える 3

9

これは正常に機能し、ブラウザは適切に処理します。jQueryドキュメントから：

...ブラウザは、、、、または要素など<html>の要素をドキュメントからフィルタリングすることがよくあります。その結果、.load（）によって取得された要素は、ドキュメントがブラウザによって直接取得された場合とまったく同じではない場合があります。<title><head>

ただし、返されるHTMLで、挿入する要素を指定することをお勧めします。

$('#remoteContainer').load('www.myurl.com/results.html #containerDiv');
于 2013-03-26T21:12:17.437 に答える
0

わかりました。質問する前に、DevToolsを確認する必要があったかもしれません。

Element Inspectorを確認したところ、（少なくともChromeでは）ブラウザーがHTML、HEAD、およびBodyタグを削除していることがわかりました。また、追加のjqueryインクルードも削除されます。しかしそれは残します

<script>my js functions here</script>

すべてのブラウザがこれほど効率的であるとは信じられないことは理解していますが、少なくとも今はその光を見てきました。

于 2013-03-26T21:40:40.770 に答える
0

私はそれが「うまくいく」はずであることに同意します。ただし、サーバーから必要なコンテンツのみを返すことで排除できる、作成中の余分なオーバーヘッドを考慮してください。破棄しているページの部分にレンダリングされているデータを取得するためにデータベースにアクセスしている可能性があります。たとえば、すべてのページの上部にユーザーに関する情報が表示されている場合があります。または、頭のページメタタグに含まれる他の情報を検索している可能性があります。おそらく、ページのこれらの余分な部分を作成しようとしているサーバー側のタイプがあります。次に、この余分なコンテンツを応答に入れ、ネットワーク経由で送信し、ブラウザに解析を依頼し、そこからhtml要素を作成してから、不要な部分を削除します。

これは大したことではないかもしれません。これは、取得するトラフィックの量、サーバーがページ全体をレンダリングするために実行している追加の作業の量、サーバーにかかる負荷の量、および時間/お金/人的資源とそれにかかる時間によって異なります。代わりに、切り捨てられた応答を送信できるようにします。トラフィックが少ない小規模なプロジェクトの場合は、変更する価値がない可能性があります。しかし、それはおそらく簡単な変更でもあります。また、質問はベストプラクティスに関するものなので、ページ全体を読み込んでページの一部だけをレンダリングすることはベストプラクティスではありません。ベストプラクティスは、サーバーから必要なものだけを返し、そのすべてを使用してページを更新することです。これは、事前にレンダリングされたHTMLまたはJSONである可能性がありますが、それはまったく別の議論です。

PHPでの簡単な解決策は、クエリ文字列で？format = ajaxを使用すると、次のように簡単になります。

<?php
$ajax = $_GET['format'] == 'ajax';

if (!$ajax) {
    render_head_and_stuff();
}

render_results();

if (!$ajax) {
    render_footer_and_stuff();
}
于 2013-03-26T22:18:18.537 に答える