js控制页面跳转的多种实现方法

字数 707阅读 268

在当前窗口中打开页面

  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>

新建窗口打开页面

  1. 超链接:<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>

返回上一步

  1. 超链接:<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>

推荐阅读更多精彩内容