js控制页面跳转的多种实现方法
在当前窗口中打开页面
- 超链接：
<a href="http://www.xxx.com" title="">欢迎光临</a>
等效于js代码 :window.location.href="http://www.xxx.com"; //在当前窗口中打开窗口
<script>
window.location.href="login.jsp?backurl="+window.location.href;
</script>
新建窗口打开页面
- 超链接：
<a href="http://www.xxx.com" title="" target="_blank">欢迎光临</a>
等效于js代码：window.open("http://www.xxx.com"); //在新建窗口中打开页面
<a href="javascript:" onClick="window.open('//www.xxx.com',' ')">这是网站</a>
返回上一步
- 超链接：
<a href="javascript:history.go(-1)">返回上一步</a>
等效于js代码：window.history.back(-1);
<script>
alert("返回");
window.history.back(-1);
</script>
其他直接页面跳转的写法：
<script>
window.navigate("home.jsp");
</script>
<script>
self.location='index.htm';
</script>
<script>
alert("非法访问！");
top.location='xxxxxx.jsp';
</script>
常见用法：
按钮式：<input name="pclogin" type="button" value="GO" onClick="location.href='//www.xxx.com'">
链接式：<a href="javascript:history.[go](http://lib.csdn.net/base/go "Go知识库")(-1)">返回上一页</a>
直接跳转式：<script>window.location.href='连接地址';</script>
开新窗口：<a href="/javascript:" onClick="window.open('http://www.xxxx.com','','height=500,width=611,scrollbars=yes,status =yes')">123</a>
或：
<script>
window.open(
'dollare.html',
'newwindow',
'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'
)
//写成一行
</script>
脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。请对照。
上例中涉及的为常用的几个参数，除此以外还有很多其他参数:
- 各项参数
其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。
| -- 参数 -- | -- 取值范围 -- | -- 说明 --|
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
隔多少秒后自动跳转到其它页(js脚本) 第一种实现方式
在<head></head>标签之间加入以下代码js：
<script>
var secs = 3; //倒计时的秒数
var URL ;
function Load(url) {
URL = url;
for(var i=secs;i>=0;i--) {
window.setTimeout('doUpdate(' + i + ')', (secs-i) * 1000);
}
}
function doUpdate(num) {
document.getElementById('ShowDiv').innerHTML = '将在'+num+'秒后自动跳转到主页' ;
if(num == 0) {
window.location = URL;
}
}
</script>
然后在<body>里面加上<body onload="Load('index.asp')"> 此处index.asp为自己要跳转的页面。
在<body></body>之间加上<div id="ShowDiv"></div>
隔多少秒后自动跳转到其它页(js脚本) 第二种实现方式
<p style="text-indent: 2em; margin-top: 30px;">
系统将在 <span id="time">5</span> 秒钟后自动跳转至新网址，如果未能跳转，<a href="//www.xxx.com" title="点击访问">请点击</a>。
</p>
<script>
delayURL();
function delayURL() {
var delay = document.getElementById("time").innerHTML;
var t = setTimeout("delayURL()", 1000);
if (delay > 0) {
delay--;
document.getElementById("time").innerHTML = delay;
} else {
clearTimeout(t);
window.location.href = "//www.xxx.com";
}
}
</script>
