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 放大镜 移动镜片效果代码
May 09 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
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实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python单例模式实例分析
2015/04/08 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python实现ID3决策树算法
2018/08/29 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
华润集团网上药店:健一网
2016/09/19 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
生产部主管岗位职责
2014/01/06 职场文书
护理专业自荐信范文
2014/02/26 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
复兴之路观后感
2015/06/02 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js