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 trim() 功能源代码
Feb 14 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
JavaScript switch语句使用方法简介
Dec 30 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
如何使用PHP中的字符串函数
2006/11/24 PHP
PHP 中dirname(_file_)讲解
2007/03/18 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书