zoukankan      html  css  js  c++  java
  • html 按钮跳转问题(及其相关)

    1.点击一个按钮跳转到另一个页面 (网址)   两种写法:

    <button onclick="{location.href='location.html'}">获取现在的位置</button> 
    
    <input type="button" value="go" onclick="location.href='http://www.runoob.com">
    

      

    2.如果想弹出一个确认框之后再跳转   

      直接加代码 if(confirm('确定跳转?')) 

    <button onclick="{ if(confirm('确定跳转?'))location.href='body/location.html'}">获取现在的位置</button>
    
    <input type="button" value="go" onclick="if(confirm('确定跳转?')){location.href='http://www.runoob.com'}">
    

      

    3.打开网页时自动触发按钮的单击事件
     // 在<body>里加一个onload="abc()"的属性就行了
                         <head>
                            <script type="text/javascript">
                                   function abc(){
                                       alert("onload");
                                                        }
                           </script>
                         </head>
                            <body onload="abc()">
                            </body>
    

      

    4. asp跳转

         如果是在ASP.net中,双击按钮,就可以进入后台页面,然在在后台页面写跳转代码 Response.Redirect("你想要跳转的网页");
         如果在html中,可以写一个form,指定你要跳转到的页面,当然这个按钮要这个form里面

         例如:<form action="你要跳到的地址" method="post" >        </form>

    5. button 与 submit  的不同

        type=button 就单纯是按钮功能 
        type=submit 是发送表单
    但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
    使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.

    用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

    ****************************************************

    <input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()">
    //执行完onClick,转到action。可以自动提交不需要onClick。onclick这里可以不要。
    
     
    
    <input type="button" name="b1" value="提交" onClick="bt_submit_onclick()">
    //执行完onClick,跳转文件在 js文件里控制。提交需要onClick。
    
    
    //比如:
    1,onclick="form1.action='a.jsp';form1.submit();" //这样就实现了submit的功能了。 2. <form name="form1" method="post" action="http://www.meijus.com"> <input type="button" name="Button" value="Button" onClick="submit()"> </form> 3. <input type="button" name="Button" value="Button" onClick="javascript:windows.location.href="你的url"">

      

    6. 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>

    <input type="button" name="btn" value="跳转" onclick="javascript:location.href='index.php'">
    <input type="button" name="btn" value="返回" onclick="javascript:history.back(-1)">

      

             

  • 相关阅读:
    .netcore返回HellowWorld四种方式(管道配置,管道扩展方法,中间件,IStartupFilter 使用中间件的升级扩展)
    Mysql分页大数据量查询优化
    swagger发布本地的调试的时候没事,发布服务器提示500 : {"Message":"出现错误。"}
    DBeaver的使用(impala和数据库)
    mysql远程连接问题
    java+thymeleaf-layout-dialect+thymeleaf的使用
    springboot+thyemeleaf+swagger项目的创建和问题的解决
    ffmpeg实践
    Camera.main
    python双曲线拟合
  • 原文地址:https://www.cnblogs.com/Willie-WangLiang/p/7068535.html
Copyright © 2011-2022 走看看