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 颜色渐变效果的实现代码
Oct 01 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
Angular的$http与$location
Dec 26 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
原生JS中应该禁止出现的写法
May 05 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 一个比较完善的简单文件上传
2010/03/25 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
vue cli 全面解析
2018/02/28 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
flask-restful使用总结
2018/12/04 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python requests证书问题解决
2019/09/05 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
公司企业表扬信
2014/01/11 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
医药销售求职信范文
2014/02/01 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
群众路线剖析材料
2014/09/30 职场文书
2014年个人年终总结
2015/03/09 职场文书
Go获取两个时区的时间差
2022/04/20 Golang