网站推广方案怎么写的,做网站人员有什么名称,企业一般用什么邮箱?,郴州网络location 对象
通过 location 对象可以以编程方式操纵浏览器的导航系统。通过设置这个对象上的属性#xff0c;可 以改变浏览器 URL 中的某一部分或全部。 location 是最有用的 BOM 对象之一#xff0c;提供了当前窗口中加载文档的信息#xff0c;以及通常的导航功能。 …location 对象
通过 location 对象可以以编程方式操纵浏览器的导航系统。通过设置这个对象上的属性可 以改变浏览器 URL 中的某一部分或全部。 location 是最有用的 BOM 对象之一提供了当前窗口中加载文档的信息以及通常的导航功能。 这个对象独特的地方在于它既是 window 的属性也是 document 的属性。也就是说 window.location 和 document.location 指向同一个对象。location 对象不仅保存着当前加载文档的信息也保存着把 URL 解析为离散片段后能够通过属性访问的信息。这些解析后的属性在下表中有详细说明location 前缀是必需的。
假设浏览器当前加载的 URL 是 http://foouser:barpasswordwww.wrox.com:80/WileyCDA/?q javascript#contentslocation 对象的内容如下表所示。
属性值说明location.hash“#contents”URL 散列值井号后跟零或多个字符如果没有则为空字符串location.host“www.wrox.com:80”服务器名及端口号location.hostname“www.wrox.com”服务器名location.href“http://www.wrox.com:80/WileyCDA/ ?qjavascript#contents”当前加载页面的完整 URL。location 的 toString() 方法返回这个值location.pathname“/WileyCDA/”URL 中的路径和或文件名location.port“80”请求的端口。如果 URL中没有端口则返回空字符串location.protocol“http:”页面使用的协议。通常是http:“或https:”location.search“?qjavascript”URL 的查询字符串。这个字符串以问号开头location.username“foouser”域名前指定的用户名location.password“barpassword”域名前指定的密码location.origin“http://www.wrox.com”URL 的源地址。只读
查询字符串
location 的多数信息都可以通过上面的属性获取。但是 URL 中的查询字符串并不容易使用。虽然 location.search 返回了从问号开始直到 URL 末尾的所有内容但没有办法逐个访问每个查询参数。
封装函数
下面的函数解析了查询字符串并返回一个以每个查询参数为属性的对象
let getQueryStringArgs function() { // 取得没有开头问号的查询字符串let qs (location.search.length 0 ? location.search.substring(1) : ), // 保存数据的对象args {}; // 把每个参数添加到 args 对象for (let item of qs.split().map(kv kv.split())) { let name decodeURIComponent(item[0]), value decodeURIComponent(item[1]); if (name.length) { args[name] value; } } return args;
} 这个函数首先删除了查询字符串开头的问号当然前提是 location.search 必须有内容。解析后的参数将被保存到 args 对象这个对象以字面量形式创建。接着先把查询字符串按照分割成数组 每个元素的形式为 namevalue。for 循环迭代这个数组将每一个元素按照分割成数组这个数组第一项是参数名第二项是参数值。参数名和参数值在使用 decodeURIComponent()解码后这是因为查询字符串通常是被编码后的格式分别保存在 name 和 value 变量中。最后name 作为属性而 value 作为该属性的值被添加到 args 对象。这个函数可以像下面这样使用
// 假设查询字符串为?qjavascriptnum10
let args getQueryStringArgs();
alert(args[q]); // javascript
alert(args[num]); // 10 现在查询字符串中的每个参数都是返回对象的一个属性这样使用起来就方便了。
URLSearchParams
URLSearchParams 提供了一组标准 API 方法通过它们可以检查和修改查询字符串。给 URLSearchParams 构造函数传入一个查询字符串就可以创建一个实例。这个实例上暴露了 get()、 set()和 delete()等方法可以对查询字符串执行相应操作。下面来看一个例子
let qs ?qjavascriptnum10;
let searchParams new URLSearchParams(qs);
alert(searchParams.toString()); // qjavascriptnum10
searchParams.has(num); // true
searchParams.get(num); // 10
searchParams.set(page, 3);
alert(searchParams.toString()); // qjavascriptnum10page3
searchParams.delete(q);
alert(searchParams.toString()); // num10page3 大多数支持 URLSearchParams 的浏览器也支持将 URLSearchParams 的实例用作可迭代对象
let qs ?qjavascriptnum10;
let searchParams new URLSearchParams(qs);
for (let param of searchParams) { console.log(param);
}
// [q, javascript]
// [num, 10] 操作地址
可以通过修改 location 对象修改浏览器的地址。首先最常见的是使用 assign()方法并传入一 个 URL如下所示
location.assign(http://www.wrox.com); 这行代码会立即启动导航到新 URL 的操作同时在浏览器历史记录中增加一条记录。如果给 location.href 或 window.location 设置一个 URL也会以同一个 URL 值调用 assign()方法。比 如下面两行代码都会执行与显式调用 assign()一样的操作
window.location http://www.wrox.com;
location.href http://www.wrox.com; 在这 3 种修改浏览器地址的方法中设置 location.href 是最常见的。 修改 location 对象的属性也会修改当前加载的页面。其中hash、search、hostname、pathname 和 port 属性被设置为新值之后都会修改当前 URL如下面的例子所示
// 假设当前 URL 为 http://www.wrox.com/WileyCDA/
// 把 URL 修改为 http://www.wrox.com/WileyCDA/#section1
location.hash #section1;
// 把 URL 修改为 http://www.wrox.com/WileyCDA/?qjavascript
location.search ?qjavascript;
// 把 URL 修改为 http://www.somewhere.com/WileyCDA/
location.hostname www.somewhere.com;
// 把 URL 修改为 http://www.somewhere.com/mydir/
location.pathname mydir;
// 把 URL 修改为 http://www.somewhere.com:8080/WileyCDA/
location.port 8080; 除了 hash 之外只要修改 location 的一个属性就会导致页面重新加载新 URL。
注意修改 hash 的值会在浏览器历史中增加一条新记录。在早期的 IE 中点击“后退” 和“前进”按钮不会更新 hash 属性只有点击包含散列的 URL 才会更新 hash 的值。
replace()
在以前面提到的方式修改 URL 之后浏览器历史记录中就会增加相应的记录。当用户单击“后退” 按钮时就会导航到前一个页面。如果不希望增加历史记录可以使用 replace()方法。这个方法接收一个 URL 参数但重新加载后不会增加历史记录。调用 replace()之后用户不能回到前一页。比 如下面的例子
!DOCTYPE html
html head titleYou wont be able to get back here/title /head body pEnjoy this page for a second, because you wont be coming back here./p script setTimeout(() location.replace(http://www.wrox.com/), 1000); /script /body
/html 浏览器加载这个页面 1 秒之后会重定向到 www.wrox.com。此时“后退”按钮是禁用状态即不能返回这个示例页面除非手动输入完整的 URL。 使用 replace()方法可以替换浏览器历史记录中当前显示的页面并导航到新 URL。
reload()
最后一个修改地址的方法是 reload()它能重新加载当前显示的页面。调用 reload()而不传参数页面会以最有效的方式重新加载。也就是说如果页面自上次请求以来没有修改过浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载可以像下面这样给 reload()传个 true
location.reload(); // 重新加载可能是从缓存加载
location.reload(true); // 强制重新加载从服务器加载 脚本中位于 reload()调用之后的代码可能执行也可能不执行这取决于网络延迟和系统资源等因素。为此最好把 reload()作为最后一行代码。
