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代码)
Oct 29 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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
克隆一个新项目的快捷方式
2013/04/10 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Python基于template实现字符串替换
2020/11/27 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
Sql面试题
2013/03/20 面试题
员工考核管理制度
2014/02/02 职场文书
节能减排倡议书
2014/04/15 职场文书
倡议书范文
2014/04/16 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
自强之星事迹材料
2014/05/12 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
务虚会发言材料
2014/12/25 职场文书
单身申明具结书
2015/02/26 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
思想品德课教学反思
2016/02/24 职场文书