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 相关文章推荐
jquery得到font-size属性值实现代码
Sep 30 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
夯基础之手撕javascript继承详解
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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python内建模块struct实例详解
2018/02/02 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python环境下安装opencv库的方法
2020/03/05 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
幼儿教师考核制度
2014/01/25 职场文书
简历上的自我评价
2014/02/03 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
团拜会主持词
2015/07/04 职场文书
公司食堂管理制度
2015/08/05 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL