（13）HTML5-网页锚点跳转与浏览器检测

来源：互联网发布：粤语翻译普通话软件编辑：程序博客网时间：2024/05/18 20:48

网页锚点跳转的功能常常被应用于手机app中，因为手机的显示屏幕范围有限，在不想使用滚动条的情况下，这需要用到页面切换的操作，为了让玩家省去每次换页就要等待画面读取的麻烦，一般的做法就是将游戏的每一个画面放在同一个页面里，这样在进入游戏时就能一次性的读取完成，之后再通过按钮的切换来决定当前要出现的显示范围内的画面，以此达到切换页面的效果。

在HTML网页中要进行网页锚点跳转，必须依靠网址超链接来实现，所以先介绍URL地址格式。

协议：//主机路径：通讯端口？搜索条件#标签

协议：网址开头，例如“http”，“ftp”等。

主机地址：网址存放的位置，例如“www.google.com”。

通讯端口：也就是俗称的port，例如“8080”。

搜索条件：使用网址传值时会将搜索条件存在网址中传送到其它页面。

标签：在同一个页面中设置不同的标签，可以快速的切换不同的显示区域。

所以收到一个网址“http：//www.web.com/index.html?subject=detail#h1”，经过解析其URL格式就可以得到以下信息：

协议：采用超文本传输协议“http”。

主机路径：网址存放的位置“www.web.com/index.html”.

通讯端口：本网址没有使用通讯端口。

搜索条件：搜索条件“subject”为“detail”。

标签：跳转到标签记号（hash）为“h1”的地方。

从URL格式可以知道，标签记号（hash）是帮助我们在同一个页面里设置跳转锚点用的特殊记号，在网址以#字符开头。设置跳转锚点可以将原本需要好几页内容的网址浓缩在一个网页中，并且按照hash值得设置来达到动态切换页面的效果，自由载入想要呈现的页面。

用文字描述相当的抽象，以下直接用例子说明。javascript指令“location.hash”可以用来设置锚点，锚点的名称必须指定为HTML标签中的一个name名称。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>        function setArchor(){            location.hash = "page_one";        }        function setArchor2(){            location.hash = "page_two";        }    </script> </head> <body >    <button onclick="setArchor()">跳到第一页</button>    <button onclick="setArchor2()">跳到第二页</button>    <div style="height:1000px;"></div>    <a name="page_one">这是第一页</a>    <div style="height:1000px;"></div>    <a name="page_two">这是第二页</a>    <div style="height:1000px;"></div> </body></html>

由于目前不同浏览器对于同一事件所采取的属性指令可能不同，再加上浏览器版本对于HTML5的支持程度各有所异，使得开发游戏时需要考虑到玩家可能使用的浏览器而加入不同程度的代码，因此需要通过事先判断浏览器的名称以及版本，协助程序选择最佳的设置值。

在HTML5中提供了navigator对象，可用于检测当前程序所启动的浏览器相关的信息。

{appCodeName}

此方法可调出当前浏览器的内部编码名称。在IE，Firefox，Safari，Chrome浏览器中都会显示“Mozilla”。使用方法如下：

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>       document.write(navigator.appCodeName);    </script> </head> <body > </body></html>

{appName}

此方法可调出当前浏览器的正式名称。在IE下执行会显示“Microsoft internet Explorer”，Firefox，Safari，Chrome则会显示“Netscape”。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>       document.write(navigator.appName);    </script> </head> <body > </body></html>

{appVersion}

此方法可以调出浏览器的版本字符串，各个浏览器的输出结果都不同。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>       document.write(navigator.appVersion);    </script> </head> <body > </body></html>

{language，systemLanguage，userLanguage}

此方法可调出浏览器所使用的语言，在IE浏览器下使用“systemLanguage”，“userLaguage”指令，在Firefox，Safari，Chrome下则使用“language”。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>      if(navigator.appName=='Netscape'){        document.write(navigator.language);      }      else{        document.write(navigator.systemLanguage+'<br/>'+navigator.userLanguage);      }    </script> </head> <body > </body></html>

{onLine}

此方法的结果是bool，true表示浏览器当前上线了，false则代表离线了。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>      document.write(navigator.onLine);    </script> </head> <body > </body></html>

{javaEnabled（）}

此方法可检测浏览器java语言是打开（true）还是关闭（false）的状态。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>      document.write(navigator.javaEnabled());    </script> </head> <body > </body></html>

汇总：

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>     document.write("编码："+navigator.appCodeName);     document.write("<br/> 浏览器："+navigator.appName);     document.write("<br/> 版本："+parseFloat(navigator.appVersion));     document.write("<br/> 语言："+navigator.language);     document.write("<br/> 联机："+navigator.onLine);      document.write("<br/> java 启动："+navigator.javaEnabled());    </script> </head> <body > </body></html>

0 0