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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
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
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
javascript打印输出json实例
2013/11/11 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
详细解读Python中解析XML数据的方法
2015/10/15 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python脚本监控docker容器
2016/04/27 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
QML实现钟表效果
2020/06/02 Python
一套带答案的C++笔试题
2014/01/10 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
不遵守课堂纪律的检讨书
2014/09/24 职场文书
继续教育个人总结
2015/03/03 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android