window.top.location.href 和 window.location.href 的区别

最新推荐文章于 2021-01-10 13:15:09 发布
原创 最新推荐文章于 2021-01-10 13:15:09 发布 · 2.7w 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了JavaScript中的顶级窗口(top)与当前窗口(window)的区别，并通过实例展示了如何利用这些概念进行页面刷新操作，特别是如何区别刷新当前框架与刷新父页面。

if (window.location.href == window.top.location.href) {     window.top.location.href = "/index.html"; }

top.window.location.reload 中top是什么意思 父框架的对象  比如 有网页  1.htm  <span id='str'>显示内容1</span> <iframe src='2.htm'></iframe>  2.htm  <input type='button' value='改变显示内容' onclick="top.document.getElementById('str').innerHTML='显示内容2222222';" />  也就是 如果 2.htm 里面 使用了： top.window.location.reload 那么就是 刷新父页面 1.htm 如果2.htm里面使用的是： window.location.reload 那就是 刷新框架 2.htm    父页面1.htm  不改变
前端知识点---window.location.assign() 和 window.location.href 的区别(javascript)
2302_80171619的博客
03-28 861
如果需要读取 URL 或简单跳转，href 更方便；如果只想执行跳转且强调跳转行为，assign() 更合适。平常用的window.location.href 更多。
top.location.href 没有权限 解决方法
09-06
以前好像没有遇到这问题，也可能是没有在意吧，我的blog内容页都是有判断的，规则是，如果top.location不是内容页的话就跳到内容页
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法
热门推荐
Defonds 的专栏
05-08 6万+
  关于js中"window.location.href"、"location.href"、"parent.location.href"、"top.location.href"的用法   "window.location.href"、"location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.locat
window.top.location
weixin_30394251的博客
11-05 1674
window.top.location的作用 top, 表示是顶层页面， 因为页面之中可能嵌入了 frame 等子页面，top表示最外面一层 Html代码 <html> <head> <script type="text/javascript"> function breakout() { i...
详解js location.href和window.open的几种用法和区别
12-14
一、location.href常见的几种形式 ... top.location.href;//在顶层页面打开新页面 ①如果页面中自定义了frame，那么可将parent、self、top换为自定义frame的名称,效果是在frame窗口打开url地址。 ②此
详解js location.href和window.open的几种用法和区别.docx
01-22
详解 JS location.href 和 window.open 的几种用法和区别 location.href 和 window.open 是 JavaScript 中两个常用的方法，用于控制浏览器的导航和窗口操作。它们的用法和区别是很多开发者需要了解和掌握的知识点。...
关于js中[removed].href,location.href,parent.location.href,top.location.href的用法与区别
12-09
“[removed].href”、”location.href”是本页面跳转 “parent.location.href”是上一层页面跳转 “top.location.href”是最外层的页面跳转 举例说明： 如果A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的...
top.location.href windows.location.href
Jerry Chou's Space
10-25 2935
防止自己的网页被人框架     top.location.href   最上层的地址     windows.location.href自己的地址  
window.top.location.href 和 window.location.href 的区别
axfcjwkbi259888707的博客
09-18 389
window.location.href 是本页面跳转 window.top.location.href是最外层的页面跳转 转载于:https://www.cnblogs.com/lxwphp/p/7730848.html
window.location.href和window.top.location.href的区别
diancang3599的博客
01-22 497
if (window.location.href == window.top.location.href) { window.top.location.href = "/index.html"; } top.window.location.reload即刷新父级页面 中top是指父框架的对象 使用情况一般是有嵌套iframe 其iframe的父页面为本<html&gt...
top.location.href和localtion.href有什么不同
allen432014的博客
06-01 364
top.location.href=”url” 在顶层页面打开url（跳出框架） 　　self.location.href=”url” 仅在本页面打开url地址 　　parent.location.href=”url” 　 在父窗口打开Url地址 　　this.location.href=”url” 　　 用法和self的用法一致 ...
top.location.href
weixin_34107739的博客
09-02 367
<script>top.location.href='../admin/login/login.htm';</script> 当有框架时，顶级窗口定向链接。 转载于:https://www.cnblogs.com/szlhtljt/p/3296192.html
使用了框架iframe的页面如何跳出框架
cktmyh的专栏
07-20 1万+
一句话，javascript中使用window.top.location="url"即可。 小知识： "window.location.href"、"location.href"是本页面跳转. "parent.location.href" 是上一层页面跳转. "top.location.href" 是最外层的页面跳转. 举例说明：     如果A,B,C,D都是html，D是C的ifr
top.location和window.location有什么区别?
m0_47668952的博客
10-21 2019
top.location和window.location有什么区别？ top.location是在顶层frame中打开新页 window.location是在当前frame中打开新页
JS页面权限最大化 if (window != top)top.location.href = location.href;
java1703的博客
06-10 2623
if (window != top) top.location.href = location.href;
js中location.href,parent.location.href,top.location.href的用法
Hi there
01-10 6074
window.location.href、location.href是本页面跳转 parent.location.href是上一层页面跳转 top.location.href是最外层的页面跳转 举例说明： 如果A,B,C,D都是html，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这写 window.location.href、location.href：D页面跳转 parent.location.href：C页面跳转 top.location.href：A页面跳转
window.location.href 和window.location
最新发布
04-30
### 关于 `window.location.href` 和 `window.location` 的区别及其获取 URL 参数的方法 #### 1. **`window.location.href` 和 `window.location` 的基本概念** `window.location.href` 是 `window.location` 对象的一个属性，表示当前页面的完整 URL 地址。而 `window.location` 是一个完整的对象，包含了更多有关当前页面的信息，例如主机名 (`hostname`)、端口号 (`port`)、路径 (`pathname`) 等[^4]。 - `window.location.href`: 表示整个 URL 字符串。 - `window.location`: 提供了一个接口来访问和设置与当前页面相关的各种信息。 两者的主要区别在于： - `window.location.href` 是字符串类型，仅提供 URL 的完整表示。 - `window.location` 是一个对象，提供了更多的方法和属性来操作 URL[^3]。 --- #### 2. **如何使用 `window.location` 获取 URL 参数** ##### 方法一：通过正则表达式解析查询参数 可以编写一个通用函数，利用正则表达式从 `window.location.search` 中提取指定名称的参数值。 ```javascript function getUrlParameter(name) { const regex = new RegExp(`[?&]${encodeURIComponent(name)}=([^&#]*)`); const results = regex.exec(window.location.search); return results === null ? null : decodeURIComponent(results[1]); } // 示例调用 const paramValue = getUrlParameter('key'); // 替换 'key' 为你想获取的参数名 console.log(paramValue); ``` 这种方法适用于简单的键值对形式的查询字符串，并能够正确处理编码字符[^1]。 --- ##### 方法二：分割查询字符串并手动查找目标字段 如果不希望通过正则表达式实现，还可以通过对 `window.location.search` 的子串操作完成同样的功能。 ```javascript function getQueryValue(key) { const queryStr = window.location.search.substring(1); // 去掉开头的 '?' const pairs = queryStr.split('&'); for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].split('='); if (decodeURIComponent(pair[0]) === key) { // 比较解码后的键名 return decodeURIComponent(pair[1]); // 返回对应的值 } } return null; // 如果未找到，则返回 null } // 示例调用 const value = getQueryValue('paramName'); // 替换 'paramName' 为实际参数名 console.log(value); ``` 这种方式适合于逐项对比需求较为简单的场景[^2]。 --- ##### 方法三：使用现代浏览器支持的 `URLSearchParams` API 在较新的环境中（如主流桌面端/移动端浏览器），推荐使用内置的 `URLSearchParams` 接口简化操作流程。 ```javascript function getUrlParam(paramName) { const params = new URLSearchParams(window.location.search); // 创建 URLSearchParams 对象 return params.get(paramName); // 调用 .get() 方法传入要找寻的名字即可得到对应的结果 } // 示例调用 const result = getUrlParam('searchKey'); // 替换 'searchKey' 为目标参数名 console.log(result); ``` 该方案不仅语义清晰，而且性能优越，在兼容性允许的情况下优先选用它来进行开发工作[^4]。 --- #### 3. **总结** `window.location.href` 和 `window.location` 各自扮演着不同的角色： - `window.location.href` 更加专注于 URL 的整体表现形式； - `window.location` 则是一个更为强大的工具集，允许开发者深入挖掘 URL 的各个组成部分。 至于获取 URL 参数的具体实现方式，可以根据项目的实际情况和个人偏好选择合适的技术路线——无论是传统的正则匹配还是现代化的 `URLSearchParams` API，都能满足日常开发中的绝大多数需求。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mydwr

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值