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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
js 编写规范
Mar 03 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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函数eval()介绍和使用示例
2014/08/20 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python 硬币兑换问题
2019/07/29 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
python regex库实例用法总结
2021/01/03 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
业务助理岗位职责
2013/11/18 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
企业内控岗位的职责
2014/02/07 职场文书
善意的谎言事例
2014/02/15 职场文书
秸秆管理实施方案
2014/03/15 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
红色经典电影观后感
2015/06/18 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫