JS页面跳转全攻略：代码示例解析

"这篇文章主要汇总了JavaScript中实现页面跳转的各种方法，包括使用window.location对象、window.history对象、window.navigate函数、self.location属性以及通过HTML元素的事件处理来实现页面跳转。" 在Web开发中，JavaScript是实现动态交互的重要工具之一，其中页面跳转是一个常见的需求。以下是一些JavaScript实现页面跳转的常用方法： 1. 使用`window.location.href`属性： ```javascript window.location.href = "login.jsp?backurl=" + window.location.href; ``` 这行代码会将当前页面重定向到`login.jsp`，并且传递一个参数`backurl`，其值为当前页面的URL。这种方式常用于登录页，以便用户登录后能返回到原先访问的页面。 2. `window.history.back(-1)`： ```javascript alert(""); window.history.back(-1); ``` 先弹出一个警告框，然后使用`window.history.back(-1)`使浏览器回退到上一页面。这种方法常用于用户取消操作或点击“返回”按钮的情况。 3. `window.navigate()`函数： ```javascript window.navigate("top.jsp"); ``` 这个函数在一些浏览器中可以工作，但在现代浏览器中已经不推荐使用，因为它可能不被所有浏览器支持。 4. `self.location`属性： ```javascript self.location = 'top.htm'; ``` `self.location`与`window.location`等价，可以用来改变当前窗口的URL。 5. `top.location`属性： ```javascript alert(" 是否确认？"); top.location = 'xx.jsp'; ``` 如果页面包含框架，`top.location`会改变整个窗口（包含所有框架）的URL。这里先弹出一个确认对话框，然后进行跳转。 6. HTML元素的`onClick`事件： ```html <input name="pclog" type="button" value="GO" onClick="location.href='http://www.51wisdom.com.cn/'"> ``` 在HTML按钮元素的`onClick`事件中执行JavaScript代码，点击按钮时跳转到指定URL。 7. HTML链接的`href`属性与`javascript:`伪协议： ```html <a href="javascript:history.go(-1)">返回</a> <a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回</a> ``` 第一行代码创建了一个链接，点击后返回上一页。第二行则使用服务器端的`HTTP_REFERER`头信息，将链接指向用户之前的页面。 8. 直接在`<script>`标签中执行跳转： ```javascript <script> window.location.href='http://www.51wisdom.com.cn/'; </script> ``` 这种方式会在脚本执行时立即跳转到指定的URL。 9. 使用`window.open()`打开新窗口： ```html <a href="javascript:" onClick="window.open('','','height=500,width=611,scrollbars=yes,status=yes')">打开新窗口</a>" ``` 点击链接时，会在新窗口或新标签页中打开指定的URL，并可以设置新窗口的属性。 以上就是JavaScript实现页面跳转的一些常见方法，开发者可以根据实际需求选择合适的方式。在编写代码时，需要注意浏览器兼容性和用户体验，避免不必要的闪烁和不适当的页面跳转。