zoukankan      html  css  js  c++  java
  • window.location 小结)

    其实在网上都能找到,我只是总结一下,方便自己查找使用

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

    属性     含义 
    protocol 协议  "http:"
    hostname 服务器的名字 "b.a.com"
    port 端口 "88"
    pathname URL中主机名后的部分 "/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"


    window.location和document.location互相等价的,可以交换使用

    location的8个属性都是可读写的,但是只有href与hash的写才有意义。

    例如改变location.href会重新定位到一个URL,而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有),而且页面不会被重新加载

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

    search: "?name=kang&how=" 第一个"?"之后
    hash: "#when=2011#first" 第一个"#"之后的内容
    方法
    location.assign( url )
    location.assign('http://www.baidu.com'); 等同于 window.location = 'http://www.baidu.com'
    这种方式会讲新地址放到浏览器历史栈中,意味着转到新页面后“后退按钮”仍可以回到该页面。
    location.replace( url )
    与assign方法一样,但会从浏览器历史栈中删除本页面,也就是说跳转到新页面后“后退按钮”不能回到该页面。目前IE、Chrome只是简单的跳转,只有Firefox会删除本页面的历史记录。
    location.reload( force )
    重新载入当前页面。force为true时从服务器端重载;false则从浏览器缓存中重载,默认值false。

    location.hash

    要使用 JS 定位锚点,完全可以使用 window.hash 配合元素 ID 完成。比如快速定位到页面的某条评论,则直接使用如下代码即可:

    window.location.hash = "#comment-5981";
    另外 Twitter、Facebook、Google 等已经开始大量使用 #! 这种形式的 hash 方法处理异步交互页面的 URL 可回溯功能。

    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 即可。

    windows.open("URL","窗口名称","窗口外观设定");

    <A href="javascript:window.open('webpage.asp','_self')"> 点击这里 </A>

    <a onclick="window.open('webpage.asp','_self');void 0" href="#"> 点击这里 </a>


    于Window.open的参数小结(参书改编) 先看一个例子:
    [javascipt:]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:新窗口的名称,可以为空
    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 窗口离屏幕左边距离(像素单位)

    关于本题中,第二个参数的详解:
    name可以为:

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

  • 相关阅读:
    Vue 冷知识(一)
    Google Chrome 谷歌浏览器 调试被坑之路
    全选、全不选、反选
    赋值运算符
    JS 数组的常用方法归纳之不改变原数组和其他
    CSS控制文字,超出部分显示省略号
    火狐浏览器解决跨域问题
    JS 数组的常用方法详解归纳之改变原数组方法
    vue项目 多文件上传并显示在页面上
    二叉搜索树操作
  • 原文地址:https://www.cnblogs.com/lanchar/p/5764436.html
Copyright © 2011-2022 走看看