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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
js函数般调用正则
Apr 08 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
javascript中var的重要性分析
Feb 11 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
原生js实现商品筛选功能
Oct 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php 实现进制相互转换
2016/04/07 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
详解Python字符串切片
2019/05/20 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
幼儿园中班评语大全
2014/04/17 职场文书