js点击button按钮跳转到另一个新页面


Posted in Javascript onOctober 10, 2014

点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢?

这样的效果可以:onclick="window.location='新页面'" 来实现。

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

代码如下

window.location.href="你所要跳转的页面";

2、在新窗体中打开页面用:

代码如下

window.open('你所要跳转的页面');

window.history.back(-1);返回上一页

代码如下

<input type="submit" name="Submit" value="同意" onclick=window.open(https://3water.com/)>

如果要在点击按钮提交时验证输入款是否填入了内容,要怎么做呢?当用户名输入或者其它的为空的时候,点击按钮不提交,可以按下列的方法做。

代码如下

<input type="submit" name="submit" onclick="open()">
<script language=javascript>

fuction open(){
if(!document.form_name.username.value) {
alert("请输入用户名!"); document.form_name.username.focus(); return false;
}else document.form_name.action="aaa.htm";
}

</script>

这样的话,当空值时,点击按钮还是不会跳转到另外的页面呢?这样就达到了效果了。

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>
Javascript 相关文章推荐
javascript 事件处理程序介绍
Jun 27 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
vue-router单页面路由
Jun 17 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
对vux点击事件的优化详解
Aug 28 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
jQuery获取iframe的document对象的方法
Oct 10 #Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 #Javascript
一个js过滤空格的小函数
Oct 10 #Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 #Javascript
window.location 对象所包含的属性
Oct 10 #Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 #Javascript
JavaScript设计模式之外观模式实例
Oct 10 #Javascript
You might like
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php中rename函数用法分析
2014/11/15 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python感知机实现代码
2019/01/18 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
python 瀑布线指标编写实例
2020/06/03 Python
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
办公室经理岗位职责
2014/01/01 职场文书
新领导上任欢迎词
2014/01/13 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
英语教学随笔感言
2014/02/20 职场文书