Html元素引起多次加载页面的问题分析

本文转自http://blog.csdn.net/kimera/article/details/7567685

一、Button元素

button各个浏览器的表现,在w3c中，标准的button，其type是submit，等效于<input type=”submit” value=”xxx”/>

浏览器	type	行为	解决办法
Firefox	submit	会提交表单	指定type
chrome	submit	会提交表单	指定type
ie6	button	不会提交表单
ie7	button	不会提交表单
ie8	submit	会提交表单	当指定type为button时，则可以避免误用button。 如 <button type=”button” οnclick=”dosomething();”>我不是提交</button>。 可以在onclick事件添加return false;避免提交， 如 <button οnclick=”dosomething(); return false;”>我不是提交</button>。 通过在页面head处添加页面以ie7兼容模式查看，也可解决<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
ie9	submit(未测)	会提交(未测)	ie9不支持xp，暂时无法测试，其号称是支持标准最规范，那么其默认是submit

综上所述，为了避免button在各个浏览器中解析的问题，在使用 button时，最佳方案应手动设置其type的类型，即使是submit。或者最佳用input控件

二、img,link,scriptr的src问题

当以下代码出现在html中
<link type=”text/css” href=”#” rel=”stylesheet” />
<script type=”text/javascript” src=”#”></script>
<script type=”text/javascript” src=”?”></script>
<link type=”text/css” href=”?” rel=”stylesheet” />
<img src=”#” />
<img src=”?” />
这些代码会引发将当前页面的输出流作为其src的值，造成页面的二次加载。在浏览器接收流时，会判断其格式（文本或图片）。当发现格式不匹配会主动关闭与服务器之间的连接。引发服务器抛出异常：ClientAbortException。

三、超链接的href问题

当A标签的href=”#”或href=”?”不会引发多次加载页面的问题。常见的会在a标签href赋值#,javascript:;,或javascript:void();其不同的值在不同的浏览器有不同的表现，会产生不同的行为。

href值	行为	优点	缺点
#	锚点会定位到页头	锚点使用可以快速定位当前页面中的位置	页面会有跳动
javascript:;和javascript:void(0);	无响应，死链接	在当前位置进行操作响应(如ajax请求，dom元素控制)	当需要页面整个刷新或跳转时在ie6下会不成功

当需要页面做一些处理后时行页面整个的提交或页面跳转，有以下方法
<a href=”#” οnclick=”checkAndSubmit();return false;”>判断再提交</a>
<a href=”###” οnclick=”checkAndSubmit();”>判断再提交</a>
<a href=”javascrpt:checkAndSubmit();”>判断再提交</a>
推荐第一种方案。