html更新問題

Question

這是php網頁,我照著書本做了一個聊天室..使用meta http-equiv="refresh" content="1" url="xxx.php" 來更新顯示訊息區

首先聊天室是這樣子的


顯示訊息區
A:今天如何(5:03 10秒)
B:還可以(5:03 15秒)
A:xxxxxx (5:03 20秒)
B:xxxxxx(5:04 24秒)
A:xxxxxx (5:03 30秒)
B:xxxxxx(5:04 40秒)
B:xxxxxx(5:04 42秒)
...........
.................
...........
............
(越來越多內容)
B:xxxxxx(5:10 32秒)
--------------------------
發言區
使用者輸入文字,按送出就把訊息傳送至顯示訊息區

問題在於每次自動更新畫面時會跳到(5:03 10秒)這裡,而不是跳到(5:10 32秒)這裡,等於使用者打出的訊息無法馬上看到,看到的都是重覆畫面(舊訊息5:03 10秒),請問這部份要如何解決啊?

好鬼 · Accepted Answer

更改 顯示時間的順序即可囉
即 最新的的留言在最上面
因為  <meta http-equiv="refresh"> 這個是重新整理頁面
所以你的網頁會整個重置，所以畫面會跳到最上面去

2008-01-14 09:38:19 補充：
你現在是使用 Javascript方式 當頁面 onload 的時候，自動將捲軸往下拉嗎?

scrollIntoView() 是將捲軸拉到這個設定(scrollIntoView()) 的位置
應該是只執行一次就不會再拉到該位置了，會發生當你往回拉的時候，又自動跑下去的話，你應該有用到  setTimeout( ) ?

2008-01-14 09:44:34 補充：
不然試試下面語法

......
 
......

2008-01-14 09:46:52 補充：
..........被吃掉了 orz   
重貼一次 ( ＜＞  改全形，你貼上後自行改回半形

＜script type='text/javascript'＞
function scrolldown(){
	var obj = document.getElementById( 物件ID名稱 );
	if( obj.scrollHeight ＞ obj.scrollTop ){
		obj.scrollTop = obj.scrollHeight;
	}
}
＜/script＞
...
＜body onload='scrolldown();'＞
...

2008-01-18 09:24:30 補充：
你提供的那幾行javascript好像有缺少一些東西?
我試著執行沒效哩...@__@

你有試著我給的程式嗎?我把完整的html貼給你
你存成 xxx.html 試看看是不是你要的

2008-01-18 09:24:58 補充：
＜html＞
＜head＞
＜meta http-equiv="refresh" content="3" url="abc.html"＞
＜script type='text/javascript'＞
function scrolldown(){
	var obj = document.getElementById( 'msg' );
	if( obj.scrollHeight ＞ obj.scrollTop ){
		obj.scrollTop = obj.scrollHeight;
	}
}
＜/script＞

2008-01-18 09:25:06 補充：
＜/head＞
＜body onload='scrolldown()'＞
＜textarea id='msg' cols='50' rows='3'＞
A: Line 1...
B: Line 2...
C: Line 3...
A: Line 4...
B: Line 5...＜/textarea＞
＜/body＞
＜/html＞

2008-01-18 09:26:55 補充：
分2段( 記得將 ＜、＞改成半形)
當重新整理時它會將  自動拉到最下方

inthisx_00 · Answer

沄 我不會寫javascript....

2008-01-10 21:56:20 補充：
沄 我爬文 早到解決方法了 謝謝

沄™ · Answer

跳到(5:03 10秒)這裡...是什麼意思= =?

兩筆訊息不是都在同一個頁面嘛

還是你指的是訊息overflow超過頁面大小時出現scroll bar而看不到?

2008-01-10 21:07:36 補充：
我提供一個方法

之前我用ajax做聊天室也剛好碰到

這只需要一行javascript程式碼

"id".scrollIntoView();

可以在HTML最底下加一個 
然後在頁面讀取完畢時呼叫view.scrollIntoView();

捲軸就會自動捲到看的到這個物件的位置

2008-01-10 21:11:07 補充：
痾...我的tag被吃掉了
HTML加    div id="view" 的tag

2008-01-13 05:17:57 補充：
這可難倒了...

你的聊天室是用php重新整理來達到資料更新

無論如何，頁面重整一定就會打斷你滑鼠拖曳scroll bar的動作吧?

利用伺服器端來更新頁面，卻要跟客戶端的事件互動
光憑PHP能力是很有限的

畢竟用這種方式來做聊天室本身就不是很好的辦法

我覺得初學能做出功能就好了

2008-01-13 05:19:48 補充：
我倒是挺好奇，之前你的更新是先看到舊訊息

當你想往下拖去看新訊息時，如果有新訊息

應該也會畫面重整而又跳回去吧?

2008-01-16 12:56:46 補充：
我認為不是javascript的問題了

因為PHP不斷更新一定會打斷滑鼠動作，並且重置scroll bar位置

也許使用frame裡面來更新資料，然後用div包裝用來做捲軸

這樣更新不會打斷滑鼠拖曳，卷軸也不會被更新影響位置

這樣說不定可行，未經實驗

html更新問題

3 個解答