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各种复制代码收集
Sep 20 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
javascript操作ul中li的方法
May 14 Javascript
纯JS代码实现气泡效果
May 04 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
JavaScript表单验证开发
Nov 23 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 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获取某个目录大小的代码
2008/09/10 PHP
学习php分页代码实例
2013/10/24 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
node中的session的具体使用
2018/09/14 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
远程调用的原理
2014/07/05 面试题
摄影实习自我鉴定
2013/09/20 职场文书
大专生自荐信
2013/10/04 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
会计学毕业生求职信
2014/06/25 职场文书
人民调解协议书范本
2014/10/11 职场文书
个人学习总结范文
2015/02/15 职场文书
小学语文教师研修感悟
2015/11/18 职场文书