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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
详解微信小程序调起键盘性能优化
Jul 24 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
JavaScript实现省市区三级联动
Feb 13 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中实现记住密码自动登录的代码
2011/03/02 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
python魔法方法-自定义序列详解
2016/07/21 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Python实现的快速排序算法详解
2017/08/01 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
英语求职信范文
2014/05/23 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
项目投资意向书范本
2015/05/09 职场文书
公司催款律师函
2015/05/27 职场文书
导游词之江西赣州
2019/10/15 职场文书