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(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
详解React的回调渲染模式
Sep 10 Javascript
关于JavaScript轮播图的实现
Nov 20 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 无限级数据JSON格式及JS解析
2010/07/17 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Python属性和内建属性实例解析
2020/01/14 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Java文件和目录(IO)操作
2014/08/26 面试题
理工科学生的自我评价
2013/12/15 职场文书
老师的检讨书
2014/02/23 职场文书
奠基仪式主持词
2014/03/20 职场文书
销售经理竞聘书
2014/03/31 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
文案策划专业自荐信
2014/07/07 职场文书
房地产端午节活动方案
2014/08/24 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
高考学习决心书
2015/02/04 职场文书
学校通报表扬范文
2015/05/04 职场文书
寒假致家长的一封信
2015/10/10 职场文书
2016大一新生军训感言
2015/12/08 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
Python 绘制多因子柱状图
2022/05/11 Python