window.location和document.location的区别分析

所属分类: 网络编程 / JavaScript 阅读数: 1092
收藏 0 赞 0 分享
document.location 这个对象包含了当前URL的信息
location.host 获取port号
location.hostname 设置或获取主机名称
location.href 设置或获取整个URL
location.port设置或获取URL的端口号
location.search 设置或获取href属性中跟在问号后面的部分
-------------------------------------------------------------------------------
js中window.location的应用
URL即:统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成:
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等
host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数,可选,省略时使用方案的默认端口,如http的默认端口为80。
path:路径
由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
query:查询
可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。
fragment:信息片断
字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点.)
对于这样一个URL
http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值: http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
2,window.location.protocol
URL 的协议部分
本例返回值:http:
3,window.location.host
URL 的主机部分
本例返回值:www.x2y2.com
4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符
本例返回值:""
5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html
6,window.location.search
查询(参数)部分
除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6
7,window.location.hash
锚点==========================================
document.href="https://www.jb51.net"
document.location="https://www.jb51.net"
window.location="https://www.jb51.net"
只是属于包含的问题
一个是window,一个是document
location 是个对象 比如本页的document.location 和window.location的属性有
location.hostname = community.csdn.net
location.href = http://community.csdn.net/Expert/topic/4033/4033372.xml?temp=2.695864E-02
location.host = community.csdn.net
location.hash =
location.port =
location.pathname = /Expert/topic/4033/4033372.xml
location.search = ?temp=2.695864E-02
location.protocol = http:
可见href 是location的属性 类别是string 。
[document对象]
  该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
  属性
  alinkColor 活动链接的颜色(ALINK)
  anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)
  anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)
  bgColor 文档的背景颜色(BGCOLOR)
  cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
  fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)
  form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)
  forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
  lastModified 文档最后的修改日期
  linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)
  link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)
  links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
  location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,
可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而
document.location不是对象
  referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
  title 文档的标题((TITLE>)
  vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性
  方法
  clear 清除指定文档的内容
  close 关闭文档流
  open 打开文档流
  write 把文本写入文档
  writeln 把文本写入文档,并以换行符结尾
[window对象]
  它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。
  属性
  defaultStatus 缺省的状态条消息
  document 当前显示的文档(该属性本身也是一个对象)
  frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)
  frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个
对象)
  history 窗口的历史列表(该属性本身也是一个对象)
  length 窗口内的框架数
  location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location
混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变
document.location (因为这是当前显示文档的位置)
  name 窗口打开时,赋予该窗口的名字
  opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引
入的一个新属性)
  parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
  self 当前窗口或框架的同义词
  status 状态条中的消息
  top 包含当前框架的最顶层浏览器窗口的同义词
  window 当前窗口或框架的同义词,与self相同
  方法
  alert() 打开一个Alert消息框
  clearTimeout() 用来终止setTimeout方法的工作
  close() 关闭窗口
  confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击
Cancel返回false
  blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)
  focus() 把指定的窗口带到前台(另一个新方法)
  open() 打开一个新窗口
  prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
  setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序
  Onload() 页面载入时触发
  Onunload() 页面关闭时触发
区别:用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多