JavaScriptでHTMLページの一部を更新したいです。


JavaScriptを使い、HTMLページの一部分だけを再読み込みしたいのですが、何か良い方法があればご教示ください。

たとえばこのページにあるように、任意のタグ(divなど)にクラスをつけるだけで対応できるようにしたいのです。
http://www.ginnokagi.com/2008/04/javascripthtml.html

宜しくお願いします。

回答の条件
  • 1人2回まで
  • 登録:2009/03/08 02:37:07
  • 終了:2009/03/11 13:25:28

ベストアンサー

id:edvakf No.1

edvakf回答回数27ベストアンサー獲得回数122009/03/08 08:51:02

ポイント100pt

iframe でいいならリンク先の画像の場合と同じことが出来ますね。


div (など) でやりたいのならXMLHttpRequestでやるしかありません。

例えは div に auto_update というクラスを付けて、div の id に更新の取得先の URL を入れておくとします。

<div class="auto_update" id="http://example.com/abcde">
ほにゃらら
</div>

これを毎分更新するなら、

<script language="JavaScript">
<!--
(function(){
//XMLHttpRequestを使ってinnerHTMLを書き換え
function update(div,url){
  //URL適当な引数を付けることで、ブラウザのキャッシュが効いてしまうのを防ぐ
  url = (url.split('?').length > 1)? url + '&' + new Date().getTime() : url + '?' + new Date().getTime(); 
  var x = new XMLHttpRequest;
  x.open('GET', url, true);
  x.onload = function(){div.innerHTML = x.responseText};
  x.send(null);
}

//クラス名にauto_updateを含むdiv要素を見付ける
function auto_update(){
  var divs = document.getElementsByTagName('div');
  for(var i=0,l=divs.length;i<l;i++){
    if(divs[i].className.indexOf('auto_update')>0)
      update(divs[i], divs[i].id);
    }
  }
}

//1分ごとに実行
setInterval(auto_update,60*1000)
})()
//-->
</script>

みたいな感じになります。

上のコードは試してないので動くかどうかわかりません。IE の場合は XMLHttpRequest を定義してやらないといけません。そのへんのノウハウは色んなところに転がってますが、例えばこのへんを参考に→ http://la.ma.la/blog/diary_200509031529.htm

何にせよ、簡単にやりたいなら iframe で十分だと思います。(ただ iframe は嫌う人がいますので)

id:rimk

たいへん参考になりました。ありがとうございました。

2009/03/08 14:58:25
  • id:edvakf
    divs[i].className.indexOf('auto_update')>0
    ではなくて
    divs[i].className.indexOf('auto_update')>=0
    ですね。他にもミスがあるかも。
  • id:edvakf
    if(divs[i].className.indexOf('auto_update')>=0){ ←この開き括弧も忘れてますね。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません