zoukankan      html  css  js  c++  java
  • js跳转页面方法实现汇总

    一、页面之间的跳转传参

    1、在页面之间跳转的方式有两种:

    window.location.href=”test.html?num=10”   地址会改变参数也会被传递但是不会打开新窗口

    window.open("test.html") 这样会重新打开一个新窗口。

    2、获取参数

    如果是按照第一种方式进行了传递则有参数,那么我们怎们获取url中的参数那,那就使用js默认的属性:  var url = location.search; 

    其中的location.search 就是js自动获取url中? 后的所有值。获取了这个之后就可以使用substring,split等来获取参数了。

    3、实例展示

    [javascript] view plain copy
     
    1.         // 跳转url 以及传递的参数  
    2.     window.location.href='http://img.as.com/news/image/newscenter/20111107zt/whd/30share/jieguo1n.html?money='+nums+'&url='+fxurl;  
    3.   
    4.         // 获取money,以及分型的地址  
    5.     function GetRequest() {  
    6.           var url = location.search;   
    7.          var theRequest = new Object();  
    8.           if (url.indexOf("?") != -1) {  
    9.             var str = url.substr(1);  
    10.             //alert(str);  
    11.             var strs= new Array();     
    12.              strs = str.split('&');  
    13.             var money=strs[0].substring(6);  
    14.             fxurl=(strs[1].substring(4)).trim();  
    15.             //alert(fxurl);  
    16.             var  view=money+"元";  
    17.             $("#jieguo1m").html(view);  
    18.       }  
    19. }  
    20. GetRequest();  


    这样当跳转到url指定的页面后,调用GetRequest();这个函数,函数中的location.search;来获取了url中?后的所有参数,接下来就是按照需求来解析了。

    二、返回上一页

    1、在原来的窗体中直接跳转用

    [javascript] view plain copy
     
    1. window.location.href="test.html";  

    2、返回上一页原页面中的表单中的数据会丢失

    [javascript] view plain copy
     
    1. window.history.go(-1);  

    3、返回上一页原页面 表单中的内容会保留

    [javascript] view plain copy
     
    1. window.history.back();  

    实例:

    1、

    [javascript] view plain copy
     
    1. <input type=button value=刷新 onclick="window.location.reload()">  
    2. <input type=button value=前进 onclick="window.history.go(1)">   
    3. <input type=button value=后退 onclick="window.history.go(-1)">  
    4. <input type=button value=前进 onclick="window.history.forward()">   
    5. <input type=button value=后退 onclick="window.history.back()">  


    2、

    [javascript] view plain copy
     
    1. <a href="javascript:history.go(-1)">返回上一页</a>   
    2. <a href="javascript:location.reload()">刷新当前页面</a>   
    3. <a href="javascript:" onclick="history.go(-2); ">返回前两页</a>   
    4. <a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>   
    5. <a href="javascript:" onclick="history.back(); ">返回上一页</a>   


    这里看到了 <a href="javascript:">就说说这个:

    [javascript] view plain copy
     
      1. <a href=”javascript:” onclick=”fun1()” >  </a>  
      2. <a href=”javascript: undefined” onclick=”fun1()” >  </a>  
      3. <a href=”javascript:void(0)” onclick=”fun1()” >  </a>  
      4. 这三种方式,要实现的效果是一样的。即不执行跳转而是执行对应的函数,而JavaScript:void(0)在页面内容很多的时候会好一些  
      5. 而且W3C标准不推荐在href里面执行javascript语句,所以还是用 onclick事件触发吧,所以我们不要这样写:<a href=javascript:function()>  </a>  

    代码如下:


    <span id="tiao">3</span><a href="javascript:countDown"></a>布丁足迹;秒后自动跳转……<meta http-equiv=refresh content=3;url='/search/billsearch.jsp'</ul> 
    <!--脚本开始--> 
    <script language="javascript" type=""> 
    function countDown(secs){ 
    tiao.innerText=secs; 
    if(--secs>0) 
    setTimeout("countDown("+secs+")",1000); 

    countDown(3); 
    </script> 
    <!--脚本结束--> 

    按钮式: 

    <INPUT name="pclog" type="button" value="GO" onClick="location.href='http://www.ddhbb.com/'"> 

    链接式: 

    <a href="javascript:history.go(-1)">返回上一步</a> 
    <a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a> 

    直接跳转式: 

    <script>window.location.href='http://www.ddhbb.com';</script> 

    开新窗口: 

    <a href="javascript:" onClick="window.open('http://www.ddhbb.com/blog/guestbook.asp','','height=500,width=611,scrollbars=yes,status=yes')">布丁足迹</a> 


    JS跳转页面参考代码 

    第一种: 
    <script language="javascript" type="text/javascript"> 
    window.location.href="login.jsp?backurl="+window.location.href; 
    </script> 
    第二种: 
    <script language="javascript"> 
    alert("返回"); 
    window.history.back(-1); 
    </script> 
    第三种: 
    <script language="javascript"> 
    window.navigate("top.jsp"); 
    </script> 
    第四种: 
    <script language="JavaScript"> 
    self.location='top.htm'; 
    </script> 
    第五种: 
    <script language="javascript"> 
    alert("非法访问!"); 
    top.location='xx.jsp'; 
    </script> 

    =====javascript中弹出选择框跳转到其他页面===== 
    <script language="javascript"> 
    <!-- 
    function logout()...{ 
    if (confirm("你确定要注销身份吗?是-选择确定,否-选择取消"))...{ 
    window.location.href="logout.asp?act=logout" 


    --> 
    </script> 

    =====javascript中弹出提示框跳转到其他页面===== 
    <script language="javascript"> 
    <!-- 
    function logout()...{ 
    alert("你确定要注销身份吗?"); 
    window.location.href="logout.asp?act=logout" 

    --> 
    </script> 

  • 相关阅读:
    递归方法:对于树形结构的表,根据当前数据获取无限极的父级名称
    P
    A
    今年暑假不AC1
    J
    今年暑假不AC
    A
    *max_element函数和*min_element函数
    1199: 房间安排
    素数
  • 原文地址:https://www.cnblogs.com/zp-uestc/p/8967249.html
Copyright © 2011-2022 走看看