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 相关文章推荐
cument.execCommand()用法深入理解
Dec 04 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
node实现的爬虫功能示例
May 04 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python正则表达式完全指南
2017/05/25 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python向图片里添加文字
2019/11/26 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
思想政治自我鉴定
2013/10/06 职场文书
承诺书样本
2014/08/30 职场文书
高中美术教学反思
2016/02/17 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Go 语言结构实例分析
2021/07/04 Golang