西西河

主题:【原创】发帖时,如不小心离开页面,如何提示用户 -- 铁手

共:💬26 🌺31 新:
全看分页树展 · 主题
家园 【原创】发帖时,如不小心离开页面,如何提示用户

这个是西西河功能的一部分,大部分的功能已经实现,还有一些需要解决的问题,写出来,一则和需要的同学一起分享,另外也希望能够得到一些讨论。

具体的情况是,因为回复的窗口出现在阅读的页面中,有时候会出现用户在输入部分回复内容后,需要到别的页面查看一些内容,结果不小心就跳转到其他页面,导致所输入的内容丢失。对于这种情况,希望能够有合适的方法来保证辛辛苦苦输入的内容不会轻易消失。

一种方法是GMAIL里面的做法,就是在用户输入的同时,定时在后台服务器保存所输入的内容(短的内容估计也可以在本地机器上用cookie的方式来保存)。这样可以不用担心用户链接跳转到别的地方,也不用担心突然断电关机的情况。定时保存用户所输入内容,用AJAX实现起来也比较方便。问题在于这需要相对比较强大的后台服务器的支持。如果有多个用户同时在线输入内容的话,就相当于凭空多增加了很多的用户在访问服务器。我以前试过在西西河放一个实时刷新某些内容的功能,结果服务器后来不堪重负最终放弃。如果手头资源足够,可以用这个办法,没足够的资源的情况下,估计用下面这个方式会更好一些。

这另外一种方式,就是在用户万一不小心要离开页面的时候,可以提供一个提示信息。有一个 event 叫 onbeforeunload 可以被利用。简单的说,任何可能导致离开当前访问页面的操作都会诱发这个 event 发生,比如说回退,点击别的链接,刷新页面等等。我们需要做的,就是给这个event定制一个提醒 function。

比如在javascript中:

window.onbeforeunload=AreYouSure

function AreYouSure(){

return "确定要离开本页面?"

}

好了,这个是最基本的思路。稍微优化一点,可以只在那些需要有输入内容的页面加这个定制的event function,也可以设定一个标志符,只在用户有内容改动的时候才让这个功能有效。

现在回到西西河来。

一个输入框,比如回复框和短信发送,都涉及到 form 里面的内容改动 和 最后的提交。河里对输入框有一些辅助功能,比如点击一个笑脸可以在所输入的内容里添加代表笑脸的代码,点击一个按钮可以添加一些特殊效果的代码。在大部分的情况下,这些功能都没有问题。难度出在添加那些表情图的时候。

考虑有两种可能来实现添加表情符的功能。一种是用链接,也就是

<a href="javascript:void(0)" onclick="mmmm">image here</a>

的方式。一种是

<input type="image" src="image here" onclick="mmmm">

最后一种是

<button type="button"><img src="image here"></button>

考虑到所需要实现的功能,在javascript function 中需要引用到 form 中的文字输入框。一是可以在function的传入参数中用form的名称,然后用 document.getItemByID(form name)来获得这个form的引用,二是可以直接传入 form object 的 引用。用<input type="image" ...>或者<button ...> 的好处是在于可以用 this.form 作为输入参数来引用相应的form object而不用考虑所在 form 的具体名称。这在一定程度上可以做到与具体 form 名称无关,函数显得比较通用一些。需要注意的是,<input type="image" 这样的实现方式,浏览器会认为这是一个提交 (submit button),在点击那些 image button 的时候,会触发 onbeforeunload,导致不必要的提示信息出现。

这样一来,最好的办法,应该是使用

<button type="button" onclick="..."><img src="image here"></button> 浏览器会认为这是一个 push button 而不是作为 submit button 来处理。

用链接的方式也可以,但是需要注意的是,有的链接方式虽然不会导致离开页面,但是依旧会发出离开页面的消息。情况有些复杂,主要是涉及到不同的浏览器。简单测试后,<a href="javascript:function...">,<a href="javascript:void(0)" onclick="...." 在 firefox 下正常,但是 <a href="javascript:void(0)" onclick="....">在IE8下面点击这个链接引入输入框的时候就会发出离开页面的消息,<a href="javascript:;" onclick="function();return false">链接</a> 在IE8下面则正常。

眼下看来,比较好的通用的方式大概就是 <a href="javascript:void(funtion)">链接</a>。相对节省空间。唯一的问题是,如果第一次点击链接引入输入框后,在输入过程中,如果再次不小心点击到那个链接,以前输入的内容就会丢失。也许应该在第一次点击之后,就把那个链接失效掉。

关键词(Tags): #网页编程#onbeforeunload
全看分页树展 · 主题


有趣有益,互惠互利;开阔视野,博采众长。
虚拟的网络,真实的人。天南地北客,相逢皆朋友

Copyright © cchere 西西河