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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
js 编写规范
Mar 03 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
小程序实现按下录音松开识别语音
Nov 22 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的面试题集
2006/11/19 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
PHP自定义错误用法示例
2016/09/28 PHP
xtree.js 代码
2007/03/13 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python变量和数据类型详解
2017/02/15 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
详解Python的循环结构知识点
2019/05/20 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
护士辞职信怎么写
2015/02/27 职场文书
工作表现证明
2015/06/15 职场文书