美文网首页
window.location

window.location

作者: 江湖相望知冷暖 | 来源:发表于2018-08-31 17:00 被阅读0次

    基础

    示例
    URL:http://b.a.com:88/index.php?name=kang&when=2011#first

    属性 含义
    protocol 协议 "http:"
    hostname 域名 "b.a.com"
    port 端口 "88"
    pathname 路径名 "/index.php"
    search 查询字符串("?"后的部分) "?name=kang&when=2011"
    hash 锚点(返回"#"之后的内容) "#first"
    host 等于hostname + port "b.a.com:88"
    href 当前页面的完整URL "http://www.a.com:88/index.php?name=kang&when=2011#first"

    注意
    例如:URL:http://b.a.com:88/index.php?name=kang&how=#when=2011#first
    search: "?name=kang&how=" 从第一个"?"之后,直到"#"之前的内容。包含"?"
    hash: "#when=2011#first" 第一个"#"之后的内容,直到URL末尾,包含"#"

    1. window.location和document.location互相等价的,可以交换使用。
    2. location的8个属性都是可读写的,但是一般来说只有href与hash的写才有意义。
      注:例如改变location.href会重新定位到一个URL,而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有),而且页面不会被重新加载。

    使用详情

    1. location.assign( url )
      location.assign('http://www.baidu.com'); 等同于 window.location = 'http://www.baidu.com'
      这种方式会将新地址放到浏览器历史栈中,意味着转到新页面后“后退按钮”仍可以回到该页面。

    2. location.replace( url ):
      与assign方法一样,但会从浏览器历史栈中删除本页面,也就是说跳转到新页面后“后退按钮”不能回到该页面。目前IE、Chrome只是简单的跳转,只有Firefox会删除本页面的历史记录。

    3. location.reload( force )
      重新载入当前页面。force为true时从服务器端重载;false则从浏览器缓存中重载,默认值false。

    4. location.hash
      要使用 JS 定位锚点,完全可以使用 window.hash 配合元素 ID 完成。比如快速定位到页面的某条评论,则直接使用如下代码即可:
      window.location.hash = "#comment-5981";
      另外 Twitter、Facebook、Google 等已经开始大量使用 #! 这种形式的 hash 方法处理异步交互页面的 URL 可回溯功能。

    5. location.search
      如果有这样一个 URL 地址:
      http://www.google.com.hk/search?hl=zh-CN&source=hp&biw=1400&bih=935&q=%E8%8A%92%E6%9E%9C%E5%B0%8F%E7%AB%99&aq=f&aqi=&aql=&oq=
      如何利用 JS 脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得,然后通过 split 方法结合循环遍历自由组织数据格式。
      另外,如果根据用户的搜索条件刷新页面,只需直接设置 window.location.search 即可。

    6. window.open
      于window.open的参数小结(参书改编) 先看一个例子:
      window.open("Webpage.asp?",Derek,"height=100,width=100,status=yes,toolbar=yes, menubar=no,location=no");
      此语句打开一个新窗口,页面为webpage.asp,参数为var,名字为Derek,高为100,宽为100,显示状态栏和工具条,不显示菜单和地址。

    具体总结的各个属性参数如下:
    window = object.open([URL ][, name ][, features ][, replace]]]])
    URL:新窗口的URL地址

    name:新窗口的名称,可以为空
    _blank 表示新开一个窗口,
    _parent表示父框架窗口,
    _self表示覆盖该窗口,
    xxx表示覆盖名字为xxx的窗口
    (每个窗口都可以给他命名,不能为省略,可以为空!)

    featurse:属性控制字符串,在此控制窗口的各种属性,属性之间以逗号隔开。
    fullscreen= { yes/no/1/0 } 是否全屏,默认no
    channelmode= { yes/no/1/0 } 是否显示频道栏,默认no
    toolbar= { yes/no/1/0 } 是否显示工具条,默认no
    location= { yes/no/1/0 } 是否显示地址栏,默认no
    directories = { yes/no/1/0 } 是否显示转向按钮,默认no
    status= { yes/no/1/0 } 是否显示窗口状态条,默认no
    menubar= { yes/no/1/0 } 是否显示菜单,默认no
    scrollbars= { yes/no/1/0 } 是否显示滚动条,默认yes
    resizable= { yes/no/1/0 } 是否窗口可调整大小,默认no
    width=number 窗口宽度(像素单位)
    height=number 窗口高度(像素单位)
    top=number 窗口离屏幕顶部距离(像素单位)
    left=number 窗口离屏幕左边距离(像素单位)

    replace : 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
    true - URL 替换浏览历史中的当前条目。
    false - URL 在浏览历史中创建新的条目。

    总结:

    至此window.location 总结的七七八八了。日常的开发中,这些足够挥霍了。

    参考博客:
    https://www.cnblogs.com/lanchar/p/5764436.html

    相关文章

      网友评论

          本文标题:window.location

          本文链接:https://www.haomeiwen.com/subject/gxxewftx.html