大佬教程收集整理的这篇文章主要介绍了（13）HTML5-网页锚点跳转与浏览器检测，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_502_8@网页锚点跳转的功能常常被应用于手机app中，因为手机的显示屏幕范围有限，在不想使用滚动条的情况下，这需要用到页面切换的操作，为了让玩家省去每次换页就要等待画面读取的麻烦，一般的做法就是将游戏的每一个画面放在同一个页面里，这样在进入游戏时就能一次性的读取完成，之后再通过按钮的切换来决定当前要出现的显示范围内的画面，以此达到切换页面的效果。
@H_502_8@在HTML网页中要进行网页锚点跳转，必须依靠网址超链接来实现，所以先介绍URL地址格式。
协议：网址开头，例如“http”，“ftp”等。
主机地址：网址存放的位置，例如“www.google.com”。
通讯端口：也就是俗称的port，例如“8080”。
搜索条件：使用网址传值时会将搜索条件存在网址中传送到其它页面。
标签：在同一个页面中设置不同的标签，可以快速的切换不同的显示区域。
@H_502_8@所以收到一个网址“http：//www.web.com/index.html?subject=detail#h1”，经过解析其URL格式就可以得到以下信息：
协议：采用超文本传输协议“http”。
主机路径：网址存放的位置“www.web.com/index.html”.
通讯端口：本网址没有使用通讯端口。
从URL格式可以知道，标签记号（hash）是帮助我们在同一个页面里设置跳转锚点用的特殊记号，在网址以#字符开头。设置跳转锚点可以将原本需要好几页内容的网址浓缩在一个网页中，并且按照hash值得设置来达到动态切换页面的效果，自由载入想要呈现的页面。
@H_502_8@用文字描述相当的抽象，以下直接用例子说明。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>
@H_502_8@在HTML5中提供了navigator对象，可用于检测当前程序所启动的浏览器相关的信息。
此方法可调出当前浏览器的内部编码名称。在IE，Firefox，Safari，Chrome浏览器中都会显示“Mozilla”。使用方法如下：
<!DOCTYPE html>
<head>
<Meta charset="utf-8"/>
<script>
document.write(navigator.appCodeName);
</script>
</head>
<body >
</body>
</html>
@H_502_8@此方法可调出当前浏览器的正式名称。在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>
@H_502_8@此方法可以调出浏览器的版本字符串，各个浏览器的输出结果都不同。
<!DOCTYPE html>
<head>
<Meta charset="utf-8"/>
<script>
document.write(navigator.appVersion);
</script>
</head>
<body >
</body>
</html>
@H_502_8@此方法可调出浏览器所使用的语言，在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>
此方法的结果是bool，true表示浏览器当前上线了，false则代表离线了。
<!DOCTYPE html>
<head>
<Meta charset="utf-8"/>
<script>
document.write(navigator.onLinE);
</script>
</head>
<body >
</body>
</html>
此方法可检测浏览器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>
以上是大佬教程为你收集整理的（13）HTML5-网页锚点跳转与浏览器检测全部内容，希望文章能够帮你解决（13）HTML5-网页锚点跳转与浏览器检测所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。