2

私はしばらく探していましたが、AJAXを介してページ全体をロードし、それでもすべてのjavascriptとcssを実行する方法を理解できません。

ほとんどの場合、CSSを含まないプレーンテキストになってしまいます。これを行う方法はありますか？jQuery.get、jQuery.load、jQuery.ajaxを試しましたが、実際にはそのように機能するものはありません。

4

5 に答える 5

2

私は次のように同様の問題を解決しました。

  1. ajax経由でウェブページをダウンロードする
  2. <script>それを繰り返して、</script>タグを見つけます
  3. これらのタグ内からコンテンツをテキストとして取得する
  4. 新しい<script>要素を作成し、そこにコードを挿入します
  5. タグをWebページに追加します

もう1つは、どういうわけかスクリプトを呼び出す必要があるということです。私は次のように行いました。

initAddedScriptスクリプトをページに追加した後に呼び出すコールバックのような標準化された関数名を設定します。deinitScriptコード（およびその変数、..）が不要になったときに呼び出したのと同じです。

私はこれがひどい解決策であると言わなければなりません、それはおそらくあなたが私が持っていたように悪いアプリケーションアーキテクチャを持っていることを意味します:)

cssでも同じですが、ハンドラーは必要ありません。styleタグをドキュメントヘッドに追加するだけです。

于 2012-09-05T06:37:33.307 に答える
2

別の解決策があります。で試してみてくださいiframe。jQueryを使用して、関連するすべてのコードを含むiframeスクリプトをページの一部（一部などdiv）に追加します。これにより、CSSを含めて次のようになります。

$('<iframe src="your_page.html"/>').appendTo('#your_div');

または、次のようなことを試してみてください。

$('<iframe src="your_page.html"/>').load(function(){
      alert('the iframe is done loading');
}).appendTo('#your_div');
于 2012-09-05T07:13:24.277 に答える
1

ロードするページにスタイルデータがない場合、外部スタイルシートには、呼び出し元のドキュメントに対して正しくない相対パスが含まれている必要があります。これはiFrameではないことを忘れないでください。ドキュメント内で外部ドキュメントをフレーミングしているのではなく、あるドキュメントを別のドキュメントに結合しているのです。

もう1つの問題は、ページ全体をロードすると、、、、、およびタグもロードされることです。doctypeこれは、html最新のブラウザがほとんどの場合に処理しますが、あるドキュメントを別のホールセールに詰め込むのは有効なHTMLではないため、結果は未定義です。そして、これはそれが機能しない3番目の理由に私をもたらします：セクションの外側のCSSリンクは無効であり、あなたの無計画なドキュメント内のコラージュによって引き起こされたセクションの置き忘れです。headbody head head

コンプライアンス（および正しいレンダリング）のために私が行うことはこれです。これはSuccessコールバックに実装されます。

  1. linkすべての要素を新しいjQuery要素にコピーします。
  2. セクションscript内のすべての内容をコピーしますhead
  3. .html()ロードされたドキュメントのbodyタグからコンテンツをコピーします
  4. link要素（手順1でコピーしたもの）をホストドキュメントに追加しますhead
  5. コピーしたスクリプトの内容を使用して新しいscriptタグを作成し、それも貼り付けheadます
  6. 終わり！

複雑？ある種、私は推測しますが、本当にAJAXを使用してページ全体をロードしたい場合は、それが唯一のオプションです。また、何をしてもページのJavaScriptに問題が発生します。特に、初期読み込み中に実行されるはずのコードが問題になります。これについてあなたができることは何もありません。問題がある場合は、ソースページを書き直してロードしやすくするか、iFrameをニーズに合わせて作成する方法を理解する必要があります。

そもそも、ホストドキュメントに外部CSSをロードするだけで機能するかどうかを検討する価値もあります。

于 2012-09-05T07:35:33.757 に答える
0

私はあなたがこのようなものを探していると思います：

your page div --> load --> www.some-site.com

クイック検索の後、最も近い解決策は「And」によるもののようです：ウェブサイトをDIVにロードします

Webサーバーを実行し、proxy.php次のコンテンツを含むページを作成する必要があります。

次に、JQueryのload（）関数は次のようになります。

$("#your_div_id").load("proxy.php?url=http://some-site.com");

NB。私はこのソリューションをテストしましたが、ターゲットページからすべてのCSSをロードする必要はありません。おそらく、それらを再作成する必要があります。たとえば、リモートサーバーに保存されている画像ファイルはロードされません。認証ポリシーが原因だと思います。
また、対象サイトを閲覧することなく、対象ページのみを閲覧することができます。

とにかく、これがあなたの解決策への一歩になることを願っています。

于 2012-09-05T08:03:46.230 に答える
0

  1. ajaxを使用してWebページ全体をテキストとして取得する

  2. document.open(); document.write(this.responseText); document.close();

    また

    document.documentElement.outerHTML = this.responseText;

ただし、結果のWebページが別のディレクトリにある場合は、元のWebページのcssページとjsページのパスを変更する必要があります。

于 2019-01-07T14:01:40.463 に答える