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 easyui的tabs使用时的问题
Mar 23 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
Vue底层实现原理总结
Feb 17 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
一个查看session内容的函数
2006/10/09 PHP
php&amp;java(二)
2006/10/09 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
5种Python单例模式的实现方式
2016/01/14 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
keras 权重保存和权重载入方式
2020/05/21 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
华为慧通面试题
2012/09/11 面试题
《要下雨了》教学反思
2014/02/17 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
工会文体活动总结
2015/05/07 职场文书
毕业设计工作总结
2015/08/14 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
golang为什么要统一错误处理
2022/04/03 Golang
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang
python数字图像处理:图像的绘制
2022/06/28 Python