zoukankan      html  css  js  c++  java
  • JS弹出框、对话框、提示框,JS关闭窗口、关闭页面和JS控制页面跳转

    一、JS弹出框、对话框、提示框
    1. //====================== JS最常用三种弹出对话框 ========================  
    2.   
    3.     //1弹出对话框并输出一段提示信息  
    4.     function ale() {  
    5.         //弹出一个对话框  
    6.         alert("提示信息!");  
    7.     }  
    8.   
    9.     //2弹出一个询问框,有确定和取消按钮  
    10.     function firm() {  
    11.         //利用对话框返回的值 (true 或者 false)  
    12.         if (confirm("你确定提交吗?")) {  
    13.             alert("点击了确定");  
    14.         }  
    15.         else {  
    16.             alert("点击了取消");  
    17.         }  
    18.     }  
    19.   
    20.     //3弹出一个输入框,输入一段文字,可以提交  
    21.     function prom() {  
    22.         var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ,  
    23.   
    24.         //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值  
    25.         if (name)//如果返回的有内容  
    26.         {  
    27.             alert("欢迎您:" + name)  
    28.         }  
    29.     }  
     
    1. //按钮提示框 
    2. <input type="button" name="btn2" id="btn2" value="删除" onclick="return confirm('Yes/No'););  
    3. //按钮提示框    
    4. <input type="button" name="btn2" id="btn2" value="提示" onclick="javaScript:alert('您确定要删除吗?');  
    5.   
    6. //提交按钮  
    7. <input type="button" value="提交" onclick="javaScript:window.location.href='http://www.baidu.com';"/>  
    8.   
    9. //关闭按钮  
    10. <input type="button" value="关闭" onclick="javaScript:window.close();">  
    11.   
    12. //返回并关闭连接  
    13. <href="#" onclick="javascript:;window.opener.location.reload();window.close()">返回</a>  
    14. javaScript:window.location.reload();//返回当前页并刷新  
    15.   
    16. //返回上一级页面  
    17. <input type="button" name="button" value="< 返回" onclick="javascript:history.go(-1)"/>  
     
    二、JS关闭窗口、关闭页面
    //普通带提示关闭
    function closeie(){
    window.close();
    }
    //关闭IE6不提示
    function closeie6(){
    window.opener=null;
    window.close();
    }
    //关闭IE7不提示
    function closeie7(){
    window.open('','_top');
    window.top.close();
    }
     
    三、JS控制页面跳转

    1. RequestDispatcher.forward()

     

    在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet或者是JSP到另外的一个Servlet、JSP 或普通HTML文件,也即你的form提交至a.jsp,在a.jsp用到了forward()重定向至b.jsp,此时form提交的所有信息在 b.jsp都可以获得,参数自动传递. 但forward()无法重定向至有frame的jsp文件,可以重定向至有frame的html文件,同时forward()无法在后面带参数传递,比 如servlet?name=frank,这样不行,可以程序内通过response.setAttribute("name",name)来传至下一个 页面。

    重定向后浏览器地址栏URL不变。

    例:在servlet中进行重定向

    public void doPost(HttpServletRequest request,HttpServletResponse response)

                                  throws ServletException,IOException{

    response.setContentType("text/html; charset=gb2312");

    ServletContext sc = getServletContext();

    RequestDispatcher rd = null;

    rd = sc.getRequestDispatcher("/index.jsp"); //定向的页面

    rd.forward(request, response);

    }

     

          或

          request.getRequestDispatcher(" /index.jsp ").forward(request, response);//转发到index .jsp       getServletConfig().getServletContext().getRequestDispatcher("

    /index.jsp ").forward(request, response);

          //转发到 index .jsp

    通常在servlet中使用,不在jsp中使用。

    2. response.sendRedirect()

     

    在用户的浏览器端工作,sendRedirect()可以带参数传递,比如servlet?name=frank传至下个页面,同时它可以重定向至不同的主机上,sendRedirect()可以重定向有frame.的jsp文件.

    重定向后在浏览器地址栏上会出现重定向页面的URL。

    例:在servlet中重定向

    public void doPost(HttpServletRequest request,HttpServletResponse response)

                                  throws ServletException,IOException{

    response.setContentType("text/html; charset=gb2312");

    response.sendRedirect("/index.jsp");

    }

    由于response是jsp页面的隐含对象,故在jsp页面中可用response.sendRedirect()直接实现重定位。

     

    注意:

    (1) 使用response.sendRedirect时,前面不能有HTML输出;

     

    这并不是绝对的,不能有HTML输出其实是指不能有HTML被送到了浏览器。事实上现在的server都有cache机制,一般在8K(我是说 JSP SERVER),这就意味着,除非你关闭了cache,或者你使用了out.flush()强制刷新,那么在使用sendRedirect之前, 有少量的HTML输出也是允许的。

    (2) response.sendRedirect之后,应该紧跟一句return。

    我们已经知道response.sendRedirect是通过浏览器来做转向的,所以只有在页面处理完成后,才会有实际的动作。既然你已经要做转向了,那么后的输出还有什么意义呢?而且有可能会因为后面的输出导致转向失败。

    比较:

    (1) Dispatcher.forward()是容器中控制权的转向,在客户端浏览器地址栏中不会显示出转向后的地址;

    (2) response.sendRedirect()则是完全的跳转,浏览器将会得到跳转的地址,并重新发送请求链接。这样,从浏览器的地址栏中可以看到跳转后的链接地址。

    前者更加高效,在前者可以满足需要时,尽量使用RequestDispatcher.forward()方法。

    在有些情况下,比如,需要跳转到一个其它服务器上的资源,则必须使HttpServletResponse.sendRequest()方法

     

    3. <jsp:forward page="" />

     

    它的底层部分是由RequestDispatcher来实现的,因此它带有RequestDispatcher.forward()方法的印记。

    如果在之前有很多输出,前面的输出已使缓冲区满,将自动输出到客户端,那么该语句将不起作用,这一点应该特别注意。

    注意:

    它不能改变浏览器地址,刷新的话会导致重复提交

     

     

    4. 修改HTTP header的Location属性来重定向

    通过设置直接修改地址栏来实现页面的重定向。

    jsp文件代码如下:

    <%

    response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY);

    String newLocn = "/newpath/jsa.jsp";

    response.setHeader("Location",newLocn);

    %>

     

     

    5. JSP中实现在某页面停留若干秒后,自动重定向到另一页面

    在html文件中,下面的代码:

    <meta http-equiv="refresh" content="300; url=target.jsp">

    它的含义:在5分钟之后正在浏览的页面将会自动变为target.html这一页。代码中300为刷新的延迟时间,以秒为单位。targer.html为你想转向的目标页,若为本页则为自动刷新本页。

    由上可知,可以通过setHeader来实现某页面停留若干秒后,自动重定向到另一页面。代码:

    String content=stayTime+";URL="+URL;

    response.setHeader("REFRESH",content);

     

    js 页面跳转(父页面,外层页面,本页面)

    "window.location.href"、"location.href"是本页面跳转

    "parent.location.href"是上一层页面跳转

    "top.location.href"是最外层的页面跳转

    举例说明:

    如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写

    "window.location.href"、"location.href":D页面跳转

    "parent.location.href":C页面跳转

    "top.location.href":A页面跳转

    如果D页面中有form的话,

     

    : form提交后D页面跳转

     

    : form提交后弹出新页面

    : form提交后C页面跳转

    : form提交后A页面跳转

    关于页面刷新,D 页面中这样写:

    "parent.location.reload();": C页面刷新 (当然,也可以使用子窗口的 opener 对象来获得父窗口的对象:window.opener.document.location.reload(); )

    "top.location.reload();": 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>

     第六种:

    <script type="text/javascript">
    // 页面若在框架内,则跳出框架
    if (self != top) {
      top.location = self.location;
    }; 
    
    </script>

     第七种:

    自定义时间跳转(方法一):

    <script language="javascript">
    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>

    然后在里面加上   index.asp为自己要跳转的页面。

    在之间加上

     

     

    自定义时间跳转(方法二):

    <p style="text-indent: 2em; margin-top: 30px;">
    系统将在 <span id="time">5</span> 秒钟后自动跳转至新网址,如果未能跳转,<a href="http://www.jb51.net" title="点击访问">请点击</a>。 
    <script type="text/javascript">  
      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 = "http://www.jb51.net";
        }		
      } 
    </script>
    参考文献:
    http://blog.csdn.net/anhuidelinger/article/details/17024491
    http://www.jb51.net/article/44514.htm
    http://www.tuicool.com/articles/6fQBFzF
     
    本文出自http://blog.csdn.net/leijie0322/article/details/52847493
  • 相关阅读:
    简单理解ThreadLocal原理和适用场景
    Portal实现原理
    Spring cloud微服务实战——基于OAUTH2.0统一认证授权的微服务基础架构
    Java8中 Date和LocalDateTime的相互转换
    sonar rule
    图论篇2——最小生成树算法(kurskal算法&prim算法)
    图论篇1——图的基本概念
    数论篇6——欧拉函数
    数论篇5——数论四大定理
    数论篇4——逆元(数论倒数)
  • 原文地址:https://www.cnblogs.com/taho/p/7447277.html
Copyright © 2011-2022 走看看