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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
OpenLayer学习之自定义测量控件
Sep 28 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
php session安全问题分析
2011/06/24 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python中异常重试的解决方案详解
2017/05/05 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python统计字符的个数代码实例
2020/02/07 Python
详解Python高阶函数
2020/08/15 Python
python 下划线的不同用法
2020/10/24 Python
信息管理专业学生自荐信格式
2013/09/22 职场文书
党员创先争优承诺书
2014/03/26 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
关于诚信的活动方案
2014/08/18 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
美丽人生观后感
2015/06/03 职场文书