在当前窗口中打开页面
1、超链接:<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>
新建窗口打开页面
2、超链接:<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>
3、超链接:<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象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。请对照。
上例中涉及的为常用的几个参数,除此以外还有很多其他参数:
各项参数
参数 | 取值范围 | 说明 |
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 |
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 |
depended | 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 | 窗口被激活后是否浮在其它窗口之上 |
在<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>
来源:简书
版权声明:本文由[andreaxiang]发表于 https://www.jianshu.com/p/28bbfd877f38