AJAXコンテンツの相対リソースの解決

動的にロードされるコンテンツ内の相対参照されるリソースを解決する方法を理解しようとしています。例えば、私は/index.htmlからダウンロード以下のページていたと仮定しますAJAXコンテンツの相対リソースの解決

<html><body> 
<div id="insert-here" /> 
<script> 
    $(function(){ 
    $("#insert-here").load("x/ajax-content.html"); 
    }); 
</script> 
</body></html>

そしてajax-content.htmlが含まれています

<img href="foo.png"/>

を次にfoo.pngは、私が欲しいものではありませんこれは、/foo.pngからダウンロードされます。 foo.pngを参照しているHTMLからダウンロードする必要があるので、/x/foo.pngからダウンロードする必要があります。私はこれを行う方法があるかどうか疑問に思っています（ajax-content.htmlの絶対パスを使用する以外に）？（私はこれをしたいと思うのはなぜ？私が開発していますAJAXベースのプラグインアーキテクチャページコンテンツのブロックが開発したアプリケーションとは独立して展開することを可能にする。）

出典

2009-07-09 Landon Kuhn

問題がありますこと任意のHTMLを元の文書に挿入しています。ブラウザは、問題のデータが実際に別のドキュメントから得られたものであることを知る方法がありません。ここで何が起こっているの内訳は次のとおりです。

DOM（前）：

<html><body> 
    <div id="insert-here"></div> 
</body></html>

DOM（後）：

<html><body> 
    <div id="insert-here"><img src="foo.png"></div> 
</body></html>

問題のHTMLスニペットが他から来たという事実は、 htmlの参照は、データの挿入方法のために失われます。一番簡単な解決策は、ajax-content.htmlファイルにあるパスを変更することです。これは、ファイル自体（おそらく、自動的にajaxプラグインをアップロードするツールを介して自動的に実行されます）、またはドキュメントがロードされた後にパスをマングルすることができます。だからではなく、

$("#insert-here").load("x/ajax-content.html");

を行うのあなたは、その後、データを取得する任意のパスを調整し、その後、DOMにデータを挿入する必要があると思います。

function updatePaths(responseText, textStatus, XMLHttpRequest) { 
    // check xmlHttpRequest status code 
    // parse responseText, fix up relative URLs 
} 
$("#insert-here").load("x/ajax-content.html", null, updatePaths);

出典

2009-07-09 20:22:26

AJAXコンテンツの相対リソースの解決

答えて

関連する問題