人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

宜しくお願いします。

●質問者: rimk
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript クラス タグ 対応
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● edvakf
●100ポイント ベストアンサー

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 は嫌う人がいますので)

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ