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 相关文章推荐
单独使用CKFinder选择图片的方法
Aug 21 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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
简单采集了yahoo的一些数据
2007/02/14 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
session 加入redis的实现代码
2016/07/15 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python 私有化操作实例分析
2019/11/21 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
优秀教师主要事迹
2014/02/01 职场文书
爬山的活动方案
2014/08/16 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
党支部考察意见范文
2015/06/02 职场文书
战友聚会致辞
2015/07/28 职场文书
校长新学期致辞
2015/07/30 职场文书