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 相关文章推荐
js获取指定日期前后的日期代码
Aug 20 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
js时间查询插件使用详解
Apr 07 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
JS错误处理与调试操作实例分析
Apr 13 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 数组教程 定义数组
2009/10/23 PHP
一个PHP的String类代码
2010/04/20 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP中使用curl入门教程
2015/07/02 PHP
WAF的正确bypass
2017/01/05 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
javascript知识点收藏
2007/02/22 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
Python中subprocess的简单使用示例
2015/07/28 Python
Python的标准模块包json详解
2017/03/13 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
副护士长竞聘演讲稿
2014/04/30 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers