Javascript跳转问题总结

最新推荐文章于 2022-08-27 00:04:27 发布

原创最新推荐文章于 2022-08-27 00:04:27 发布 · 854 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了使用HTML与JavaScript进行页面链接及操作的各种技巧，包括如何正确设置链接以避免页面跳转错误，如何通过不同类型的按钮打开新窗口或执行特定操作，以及如何利用JavaScript进行页面刷新、前进和后退等导航操作。

< a href="#"onclick="del(id)">删除</a>

会出现不正常跳转，将 # 改成javascript:void(0)就可以了，这是因为：

＃包含了一个位置信息默认的锚点是＃top 也就是网页的上端

而javascript:void(0) 仅仅表示一个死链接

这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首

而javascript:void(0) 则不是如此

所以调用脚本的时候最好用void(0)

或者<input onclick> < div onclick>等

打开新窗口链接的几种办法

1.window.open('url')

2.用自定义函数

<script type="text/javascript">

function del(consumer_id){
window.location.href="<%=basePath%>datamaintainservlet?command=consumerDel&consumer_id="+consumer_id;
}

< /script>

正解：

<a href="javascript:void(0)" onclick="del(${consumer_id})">删除</a>

Button链接,代码如下:

1.链接到某页
<input type="button" name="Submit" value="确定" class="btn" onclick="location.href='filename.html'" />

2.返回(等同后退)
< input name="Submit2" type="button" class="btn" onclick="location.href='javascript:history.go(-1);'" value="返回" />

3.打开新网页
<input type="button" name="Submit2" value="确定" class="btn" onclick="window.open('filename.html')" />

4.打开无边框的新窗口
<input type="button" name="Submit2" value="确定" class="btn" onclick="javascript:window.open('filename.html','','width=720,height=500,resizable=yes,scrollbars=yes,status=no')" />

5.打开新网页同时指向另一页
<input type="button" name="Submit2" value="确定" class="btn" onclick="window.open('filename.html');location.href='http://hi.baidu.com/harryxue'" />

6.打开无边框的新窗口同时指向另一页
<input type="button" name="Submit2" value="确定" class="btn" onclick="javascript:window.open('http://hi.baidu.com/harryxue','','width=720,height=500,resizable=yes,scrollbars=yes,status=no'); window.location='filename.html';" />

7.点击按钮弹出确认alert窗口
方式一：
<input type="button" name="Submit1" value="确定" class="btn"
onClick="alert('是否确认提交？');location.href= 'filename.html';return false;" >
方式二：
<input type="button" name="Submit2" value="确定" class="btn"
onClick="if (confirm('是否确认提交？'))location.href= 'filename.html';return false;" >

===========================

< input   type=button   value=刷新   onclick="window.location.reload()">
<input   type=button   value=前进   onclick="window.history.go(1)">
<input   type=button   value=后退   onclick="window.history.go(-1)">
<input   type=button   value=前进   onclick="window.history.forward()">
<input   type=button   value=后退   onclick="window.history.back()">