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

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

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

一种方法是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>。相对节省空间。唯一的问题是，如果第一次点击链接引入输入框后，在输入过程中，如果再次不小心点击到那个链接，以前输入的内容就会丢失。也许应该在第一次点击之后，就把那个链接失效掉。

以前发贴经常提心吊胆的。

老铁发奖了：

恭喜：你意外获得【通宝】一枚

鲜花已经成功送出，可通过工具取消

提示：此次送花为此次送花为【有效送花赞扬，涨乐善、声望】。

即是只在写了东西并onbeforeunload的时候才自动用AJAX储存在后台，然后打开同一个回复框或者在同一区发新主题的时候自动恢复（以及在用户后台有个地方可以查看）。为了节省空间，每个帐号可以只储存上一两次未提交就unload的内容。

当然，这个依然解决不了浏览器当机的问题，不过较新的浏览器如firefox3在恢复crashed session的时候已经可以一并恢复表格中正在填写的内容。

另外一个idea：定期用JS检查输入的内容长度，超过某些threshold的时候才储存一次。比如从一百字节开始，每增加两百字节时储存一次。

客户端定期检查输入内容的长度再决定是否保存内容到服务器，这个不会影响到服务器的性能，也能保证这个操作本身的效率。

在退出之前用 onbeforeunload 来保存没有被提交的内容，这个应该可以实现，但是得用 synchronous 而不是 asynchronous 的，因为一旦页面关闭，余下的javascript代码也就不能执行了。这可能导致延迟，比如关闭页面的时候，等一会才关闭。具体我没试验过。

选择“树展”方式看帖子就是为了整体上看明白回复关系，现在分页就破坏了整体感。而且这个是垛集式排列，有些上面的帖子涉及下面的帖子内容，分页看很不方便--我看高楼都是从主题到沙发再往楼上按回复层级看的，这样逻辑性最清楚，现在的分页排列就没法做到了。

你看是不是有点道理？

分页树展看的我就找不到北啦

而且现在pc性能都不错 没必要分页啦

一个很多回帖的主题，本来还可以看看都回了什么新帖，现在看不清了。

去支流版面，比方说《开心一刻》，随便选一个主题，树展，然后点左边的任意一个link，右边的Reading Pane毫无反应...

奇怪的是在公版就没有这个问题...

浏览器：Chrome v.3.0.195.22

不过还是要赞一下铁手，我觉得现在的回帖功能比以前好用了不少。至于铁手说的离开页面提示，至少 firefox 和 chrome 都有。

就是说树的每一个节点都可以展开/收缩，就像windows explorer的目录树一样。这样的话，对于一些热门的、树结构复杂的主题，浏览起来会容易很多。比如一个帖子，有若干一级跟贴，每一个一级跟贴下又有若干二级跟贴，如果你想就某一个二级跟贴参与讨论，那么可以只展开这个二级跟贴，这样的话，就不至于一树展就动辄十几页的树了。

你说的这个树其实早已经有了，就是各级论坛。西西河是根，下面有大类，大类下有版面，版面下有主题。

而回帖树里用户最关心的往往是对本主题最新的回帖，它们往往分散在树上，而且还都在树的末梢。如果一开始的树不是展开的，看到的就会都是老帖子。

原来那样的，找到左边的滚动条想拖一下，结果鼠标一下跑到右边，

净左右扩大来回跑了

反正回帖多了以后下面的帖子你也看不到是回哪个贴了

差别就在这里，至于千层高楼之类的极端就忽略了。

一直在改是不是愿意了，呵呵