关于HTML按钮跳转方法（及其相关）

汤姆比基尼

已于 2022-05-12 16:11:51 修改

阅读量4.1w

点赞数 26

分类专栏：心得前端三剑客网页构造文章标签： html js

于 2021-02-03 09:34:08 首次发布

本文链接：https://blog.csdn.net/weixin_44070058/article/details/113582969

版权

心得同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

前端三剑客网页构造

8 篇文章 1 订阅

订阅专栏

html 跳转问题（及其相关）

方法一
<a href="javascript:" onclick="history.go(-2); ">返回前两页</a> 
方法二
<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>
方法三
$(".btn").click(function(){
     window.history.back();   
});
//或者直接a标签添加
<a class="" href="javascript:history.go(-1)">返回</a>

1.点击一个按钮跳转到另一个页面（网址）两种写法：

<button οnclick="{location.href='location.html'}">获取现在的位置</button>

<input type="button" value="go" οnclick="location.href='http://www.aseoe.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.aseoe.com'}">

3.打开网页时自动触发按钮的单击事件

// 在<body>里加一个οnlοad="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。


//比如：

onclick="form1.action='a.jsp';form1.submit();" //这样就实现了submit的功能了。

 <form name="form1" method="post" action="http://www.meijus.com">
<input type="button" name="Button" value="Button" onClick="submit()"> </form>

<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)">

记：2022/5/12整改

汤姆比基尼

关注

26
点赞
踩
179

收藏

觉得还不错? 一键收藏
0
评论
关于HTML按钮跳转方法（及其相关）

html 跳转问题（及其相关）方法一<a href="javascript:" onclick="history.go(-2); ">返回前两页</a> 方法二<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>方法三$(".btn").click(function(){ window.history.back(); ...
复制链接

扫一扫