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求对象的高宽问题分别说明
Aug 30 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
JavaScript实现复选框全选功能
Apr 11 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&amp;mysql(五)
2006/10/09 PHP
php目录操作实例代码
2014/02/21 PHP
PHP中常用的转义函数
2014/02/28 PHP
php格式化日期实例分析
2014/11/12 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
javascript闭包入门示例
2014/04/30 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
一些Unix笔试题和面试题
2012/09/25 面试题
《青海高原一株柳》教学反思
2014/04/25 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
先进员工事迹材料
2014/12/20 职场文书
百年孤独读书笔记
2015/06/29 职场文书
生产实习心得体会范文
2016/01/22 职场文书