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第一课
Feb 27 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 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
构建简单的Webmail系统
2006/10/09 PHP
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Python利用IPython提高开发效率
2016/08/10 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
通过自学python能找到工作吗
2020/06/21 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
读书小明星事迹材料
2014/05/03 职场文书
党员创先争优心得体会
2014/09/11 职场文书
升学宴学生答谢词
2015/01/05 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
话题作文之成长
2019/12/09 职场文书