JavaScript编程中window的location与history对象详解


Posted in Javascript onOctober 26, 2015

Window Location

  • window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
  • window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
  • 一些实例:
  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 (80 或 443)
  • location.protocol 返回所使用的 web 协议(http:// 或 https://)

Window Location Href

location.href 属性返回当前页面的 URL。
实例
返回(当前页面的)整个 URL:

<script>

document.write(location.href);

</script>

Window Location Pathname
location.pathname 属性返回 URL 的路径名。
实例
返回当前 URL 的路径名:

<script>

document.write(location.pathname);

</script>

以上代码输出为:

/js/js-window-location.html


Window Location Assign
location.assign() 方法加载新的文档。
实例
加载一个新的文档:

<html>
<head>
<script>
function newDoc()
 {
 window.location.assign("http://www.w3cschool.cc")
 }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

</body>
</html>

Window History
window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
一些方法:

  • history.back() - 与在浏览器点击后退按钮相同
  • history.forward() - 与在浏览器中点击按钮向前相同

Window History Back

history.back() 方法加载历史列表中的前一个 URL。
这与在浏览器中点击后退按钮是相同的:
实例
在页面上创建后退按钮:

<html>
<head>
<script>
function goBack()
 {
 window.history.back()
 }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

Window History Forward
history forward() 方法加载历史列表中的下一个 URL。
这与在浏览器中点击前进按钮是相同的:
实例
在页面上创建一个向前的按钮:

<html>
<head>
<script>
function goForward()
 {
 window.history.forward()
 }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>
Javascript 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
Prototype Date对象 学习
Jul 12 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
canvas的神奇用法
Feb 03 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
js实现简单的随机点名器
Sep 17 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 #Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 #Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 #Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 #Javascript
php利用curl获取远程图片实现方法
Oct 26 #Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 #Javascript
JavaScript中的数据类型转换方法小结
Oct 26 #Javascript
You might like
php实现删除空目录的方法
2015/03/16 PHP
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
React实现轮播效果
2020/08/25 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python实现截屏的函数
2015/07/25 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
Python hashlib模块的使用示例
2020/10/09 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
美发活动策划书
2014/01/14 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
结婚仪式主持词
2015/06/29 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
SQL写法--行行比较
2021/08/23 SQL Server
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL