web-dev-qa-db-ja.com

HTMLページをAJAX経由で取得したコンテンツに置き換えます

典型的な構造のHTMLページがあります。

<html>
  <head>
   <script src="..." ></script>
   <style>...</style>
  </head>
  <body>
   content
  </body>
  <script>
    var success_callback = function(data) {
      // REPLACE PAGE CONTENT & STRUCTURE WITH "data"
    }
    ajax(url, params, success_callback);
  </script>
</html>

可能だと思いますか？私はすでにhtmlタグにidを与えようとして$(id).replace(data);を実行しようとしましたが成功しませんでした。

理由を聞かないでください、しかしそれが私が必要とするものです（私は特別な「マッシュアップビルダー」サイトで働いています...それは長い話です）。

[〜＃〜] edit [〜＃〜]：受信したコンテンツのスクリプトを実行する必要がある、<script src="...">を使用して含まれる外部スクリプトも含むことを忘れていました。

javascripthtmlajaxdom
63
Guido

jQueryでこれを試してください：

$('body').load( url,[data],[callback] );

詳しくは docs.jquery.com/Ajax/load

27
shfx

最も簡単な方法は、次を使用して新しいHTMLコンテンツを設定することです。

document.open();
document.write(newContent);
document.close();
133
niutech

プロトタイプ ：$(id).update(data)で行う方法は次のとおりです。

そして jQuery ：$('#id').replaceWith(data)

ただし、document.getElementById(id).innerHTML=dataも機能するはずです。

編集：プロトタイプとjQueryは自動的にスクリプトを評価します。

11
geowa4

やってみてください

document.getElementById(id).innerHTML = ajax_response
7
The.Anti.9

最も簡単な方法は

$("body").html(data);
5
LopesDaLeste

本体のコンテンツをdocument.bodyハンドラーに置き換えようとすることはできませんか？

あなたのページがこれなら：

<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>

Document.bodyを使用して本文を置き換えます。

これは私のために動作します。 BODYタグのすべてのコンテンツは、指定したinnerHTMLに置き換えられます。 htmlタグとすべての子を変更する必要がある場合は、「ドキュメント」のどのタグをチェックアウトする必要があります。そうすることができます。

内部にJavaScriptスクリプトを記述した例：

<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>

これにより、新しいコンテンツ内でJavaScriptスクリプトを実行できます。ただし、すべての二重引用符と単一引用符をエスケープすることを忘れないでください。エスケープしないと機能しません。 javascriptでのエスケープは、コードをトラバースし、すべての単一引用符と二重引用符の前にバックスラッシュを置くことで実行できます。

Phpのようなサーバー側のスクリプトはこの方法では機能しないことに注意してください。 PHPはサーバー側のスクリプトであるため、ページをロードする前に処理する必要があります。Javascriptはクライアント側で機能する言語であり、PHPコードの再処理を有効にできません。

4
xaddict

私はあなたがjQueryまたは類似のものを使用していると仮定しています。 jQueryを使用している場合、以下が機能するはずです。

<html>
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
   content
</body>
<script type="text/javascript">
   $("body").load(url);
</script>
</html>
4
Marius