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 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
详解ES6中的let命令
Apr 05 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
Vue指令指令大全
Feb 09 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 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二分法查找数组是否包含某一元素
2013/05/23 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
python实现矩阵乘法的方法
2015/06/28 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python pandas库的安装和创建
2019/01/10 Python
在python中求分布函数相关的包实例
2020/04/15 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
个人公开承诺书
2014/03/28 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
公司借条范本
2015/05/25 职场文书
呐喊读书笔记
2015/06/30 职场文书
Python装饰器详细介绍
2022/03/25 Python