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设置IFRAME的SRC值的代码
Nov 30 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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像数组一样存取和修改字符串字符
2014/03/21 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
jquery 手势密码插件
2017/03/17 Javascript
深入研究React中setState源码
2017/11/17 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
urllib2自定义opener详解
2014/02/07 Python
常用python数据类型转换函数总结
2014/03/11 Python
python数据结构之图的实现方法
2015/07/08 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python 使用shutil复制图片的例子
2019/12/13 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
考博自荐信
2013/10/25 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
学校门卫岗位职责
2014/03/16 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL