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学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
js事件(Event)知识整理
Oct 11 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
vue 实现特定条件下绑定事件
Nov 09 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/06/08 PHP
PHP中使用curl入门教程
2015/07/02 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
Javascript编写2048小游戏
2015/07/07 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
js实现轮播图的完整代码
2020/10/26 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
详解rem 适配布局
2018/10/31 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
优秀员工自荐信范文
2013/10/05 职场文书
班组长安全生产职责
2013/12/16 职场文书
自考生自我评价分享
2014/01/18 职场文书
村官工作鉴定评语
2014/01/27 职场文书
大学三年计划书范文
2014/04/30 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
推荐信模板
2014/05/09 职场文书
2014年优秀党员材料
2014/12/18 职场文书
九年级英语教学反思
2016/02/15 职场文书