我们编写HTML页面的时候，经常需要实现页面之间的跳转功能。HTML页面之间的跳转包括refresh方式跳转，location方式跳转，history方式跳转。下面我就给大家分别介绍一下这三种跳转方式。
refresh方式跳转refresh方式的跳转直接在head的meta标签里面添加就可以了，如下图所示，通过url设置跳转路径
如果refresh中不指定url，则是本页面刷新，如下图所示
location方式跳转location方式的跳转需要在js中进行调用，通过调用它下面的href属性完成跳转，如下图所示
另外还可以用setTimeOut为location跳转指定一个时间，如下图所示
history方式跳转history方式的跳转可以直接在HTML中写，如下图所示
同时也可以通过点击按钮，在JS中调用history进行跳转，如下图所示
在head里面加上这样一段代码<Meta>
跳转页面加上这个代码
<html><head>
<meta >
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hellohtml（根据自己需要自行修改）文件。
1、html的实现
<head><!-- 以下方式只是刷新不跳转到其他页面 -->
<meta ;
优点：简单；
缺点：Struts Tiles中无法使用。
2、javascript的实现
<script language="javascript" type="text/javascript">// 以下方式直接跳转
windowlocationhref='hellohtml';
// 以下方式定时跳转
setTimeout("javascript:locationhref='hellohtml'", 5000);
</script>
优点：灵活，可以结合更多的其他功能；
缺点：受到不同浏览器的影响。
3、结合了倒数的javascript实现（IE）
<span id="totalSecond">5</span><script language="javascript" type="text/javascript">
var second = totalSecondinnerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecondinnerText=--second;
if(second<0) locationhref='hellohtml';
}
</script>
优点：更人性化；
缺点：firefox不支持（firefox不支持span、div等的innerText属性）。
4、解决Firefox不支持innerText的问题
<span id="totalSecond">5</span><script language="javascript" type="text/javascript">
if(navigatorappNameindexOf("Explorer") > -1){
documentgetElementById('totalSecond')innerText = "my text innerText";
} else{
documentgetElementById('totalSecond')textContent = "my text textContent";
}
</script>
5、整合3)和3')
<span id="totalSecond">5</span><script language="javascript" type="text/javascript">
var second = documentgetElementById('totalSecond')textContent;
if (navigatorappNameindexOf("Explorer") > -1) {
second = documentgetElementById('totalSecond')innerText;
} else {
second = documentgetElementById('totalSecond')textContent;
}
setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
locationhref = 'hellohtml';
} else {
if (navigatorappNameindexOf("Explorer") > -1) {
documentgetElementById('totalSecond')innerText = second--;
} else {
documentgetElementById('totalSecond')textContent = second--;
}
}
}
</script>1页面中的注册表单中的action指向2页面，然后在2页面的<head>标签中加入下面语句：<meta
>
这个需要js来辨别的哦。
try{
if (/Android|webOS|iPhone|iPod|BlackBerry/itest(navigatoruserAgent)) {
windowlocationhref="index1asp";
}else{
windowlocationhref="index2asp";
}
}catch(e){}
</script>
那个index1asp代表手机页面。
index2asp代表电脑页面（可以设置html、php等等页面的）
<span class="STYLE22"><span class="STYLE15"><span class="STYLE16">登陆页面</span></span><span class="STYLE16">
</title>
</span>
<script type="text/javascript" language="javascript">
function CheckLogin()
{
var usrName = documentgetElementById("txtUserName");
var pwd = documentgetElementById("txtPassword");
if(usrName && pwd)
{
if(usrNamevalue == "123" && pwdvalue == "123")
{
alert("登录成功");
locationhref="fourhtml";
}
else
{
alert("登录失败");
}
}
}
</script>
</head>
<body>
</div>
<div>
<table width="323" height="148">
<tr>
<td width="64"><span class="STYLE1">用户名</span>:</td>
<td width="218">
<input id="txtUserName" type="text" /></td>
</tr>
<tr>
<td><span class="STYLE1">密码</span></td>
<td>
<input id="txtPassword" type="password" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" onclick="javascript:CheckLogin()" value="确定"/></td>
</tr>
</table>
<a href="indexhtml"><span class="STYLE2">用户名为：123 密码为：123</span><span class="STYLE17"> 登陆成功可进入下一页 否则显示登陆失败对话框 </span><span class="STYLE19">｛返回首页</span></a><span class="STYLE18"><span class="STYLE19">｝</span></span></div>
<p> </p>
<p><a href="fourhtml" class="STYLE20">匿名登陆</a>
试一下这个吧在<body>后面插入就行
还有="fourhtml" 是你想添加的页面地址
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）