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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
js瀑布流布局的实现
Jun 28 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
python实现二维码扫码自动登录淘宝
2016/12/27 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
医生进修自我鉴定
2014/01/19 职场文书
教育学习自我评价
2014/02/03 职场文书
高中班主任评语大全
2014/04/25 职场文书
促销活动总结范文
2014/04/30 职场文书
收费员岗位职责
2015/02/14 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Python实现老照片修复之上色小技巧
2021/10/16 Python
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers