document.location.reload和document.location.href的比较

最新推荐文章于 2023-05-22 20:45:17 发布
原创 最新推荐文章于 2023-05-22 20:45:17 发布 · 3.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

 共同点:两者都可以跳转到新的页面
不同点:前者跳转之后就把本页的缓存给清空了,不可以通过前进和后退
来返回上一页或者下一页了,而document.location.href却可以的.
关于js中[removed].href,location.href,parent.location.href,top.location.href的用法与区别
10-28
1. window.location.href和location.href的作用是相同的，它们用于获取或设置当前窗口的URL。如果修改这个属性，浏览器会立即跳转到新的URL。例如： ```javascript location.href = "***"; // 跳转到指定网页 ```...
[removed].reload 刷新使用分析(去对话框)
11-25
为了避免这个对话框的出现，你可以采取以下策略：首先，更新`window.location.href`到它当前的值，然后再调用`window.location.reload()`。这样做可以模拟页面的刷新，而不会触发浏览器的确认对话框。对于刷新父窗口...
JAVASCRIPT中的window.location和document.location
小乐乐
01-18 837
  document.location     这个对象包含了当前URL的信息 location.host 获取port号 location.hostname 设置或获取主机名称 location.href 设置或获取整个URL location.port设置或获取URL的端口号 location.search     设置或获取href属性中跟在问号后面的部分 一、js中window.locat...
document.location
songxiuliang的专栏
03-29 1523
document.location="url";(只读) document.location.reload("url";); window.location="url"; location="url"; document.href="url" document.location.href="url" document.location.replace="url" document.a
Document.location
zq9955的博客
10-15 4293
Document.location 是一个只读属性，返回一个 Location 对象，包含有文档的 URL 相关的信息，并提供了改变该 URL 和加载其他 URL 的方法。 尽管 Document.location 是一个只读的 Location 对象，你也能够赋给它一个 DOMString。这意味着你能够赋给 document.location 字符串，大多数情况下像这样使用：document.location = ‘http://www.example.com’，也可写为document.locatio
js刷新页面location.reload()用法详解
10-15
window.opener.location.href = window.opener.location.href; window.opener.location.reload(); ``` ### 6. 与`location.replace()`的区别 `location.replace()`函数会替换当前的历史记录条目，而`reload()`则会...
js location.replace与location.reload的区别
10-28
需要注意的是，在这个例子中，如果想要实现iframe内页面的刷新，则应该使用parent.document.location.reload()方法，因为window.location.href = parent.location.href将使得iframe加载新的页面，而不是刷新。...
window.location.href页面跳转的用法（区别于redirect）
10-25
相比`Response.Redirect`，`window.location.href`提供了更多的灵活性和定制化选项，尤其是在需要结合客户端脚本进行交互时更为适用。开发者可以根据实际需求选择合适的跳转方式，以提升用户体验和应用程序的功能性...
document.location.reload();与location.href='xxx'的区别
12-02 533
document.location.reload();会重新加载页面,onload事件会被触发。 location.href='xxx'刷新页面,onload事件不会触发。 转载于:https://www.cnblogs.com/tq03/p/3454895.html
56. 表单和文档的数据绑定——详谈NotesUIDocument.Reload()
我是传奇
09-24 311
在Notes客户端应用程序开发中，我们创建表单，用它们新建文档，然后在视图里打开、修改和删除文档。有时候我们会忽略了表单和文档是截然不同的两种实体。表单是我们在Designer里设计的，在客户端里看到的界面。文档本身则只是一个数据实体，没有界面，不包括各种格式信息和控件、操作、代码。我们从视图打开一个文档时，Notes客户端自动查找它所用的表单，然后用这个表单显示文档里的数据。一个表单可以用来显示...
js刷新页面location.reload()用法
热门推荐
stay hungry ! stay foolish!
03-12 2万+
js刷新页面location.reload()用法 转载：https://blog.csdn.net/sinat_17775997/article/details/80263724https://blog.csdn.net/M_Jack/article/details/80749585 在javascript编程中，多使用location.reload实...
js关于document和window对象
luckstar的专栏
09-11 895
document.href="http://www.sina.com.cn"   document.location="http://www.sina.com.cn"   window.location="http://www.sina.com.cn"   只是属于包含的问题     一个是window,一个是document location   是个对象   比如本页的do
document.location的用法实例
weixin_34306676的博客
03-08 353
<html> <head> <title>document.location </title> </head> <body> <b>document.location使用举例 </b ><p&a
如何用JS得到当前页面的URL信息
08-03 481
URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成： scheme://host:port/path?query#fragment scheme:通信协议 常用的http,ftp,maito等
document、location、body 属性方法
sou3713的专栏
07-26 821
document：属性 document.title                 //设置文档标题等价于HTML的标签 document.bgColor               //设置页面背景色 document.fgColor               //设置前景色(文本颜色) document.linkColor             //未点击过的链接颜色 docu
document.location的用法实例（摘抄自博客园--KoMiles，自己学习的时候记录一下）...
weixin_33919941的博客
05-10 196
<head> <title>document.location </title> </head> <body> <b>document.location使用举例 </b ><p> <script type =...
document文档对象，location位置对象
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
05-22 984
document、window、location、navigator、screen对象
window.parent.location.reload()
最新发布
07-18
<think>我们正在讨论的是在JavaScript中如何重新加载父窗口。用户提到了`window.parent.location.reload()`的用法。 根据用户的问题，我们需要解释如何使用`location.reload()`方法来重新加载父窗口，特别是在iframe或子窗口的上下文中。 关键点： 1. 在iframe中，如果子页面想要重新加载父页面，可以使用`window.parent.location.reload()`。 2. 如果是多级嵌套，可以使用`window.top.location.reload()`来重新加载最顶层的窗口。 3. `reload()`方法可以接受一个布尔参数，表示是否强制从服务器重新加载（绕过缓存）。默认是`false`，即可能从缓存加载。 注意：由于同源策略的限制，如果iframe与父页面不同源，则不能访问父页面的`location`对象，除非设置了适当的CORS策略。 我们将按照以下步骤回答： 1. 解释`window.parent`和`window.top`的概念。 2. 介绍`location.reload()`方法及其参数。 3. 提供代码示例。 4. 讨论安全限制（同源策略）。 参考用户提供的引用，虽然引用内容与当前问题没有直接关系，但我们可以忽略，因为用户明确要求关于`parent location reload`的用法。 回答结构： - 概述 - 详细说明 - 代码示例 - 安全考虑 - 总结 同时，生成相关问题。</think>### JavaScript 中重新加载父窗口的 `window.parent.location.reload()` 用法详解 在 JavaScript 中，通过 `window.parent.location.reload()` 可实现 **跨窗口控制**，特别适用于 iframe 子页面需要刷新父窗口的场景。以下是具体用法和注意事项： --- #### 1. **核心语法与作用** ```javascript // 强制重新加载父窗口（忽略缓存） window.parent.location.reload(true); // 普通重新加载（可能使用缓存） window.parent.location.reload(); ``` - **`window.parent`**：指向当前窗口的父窗口（如 iframe 的宿主页面）[^1]。 - **`location.reload()`**：重新加载页面，接受布尔参数： - `true`：强制从服务器重新加载（跳过缓存） - `false` 或空：优先使用浏览器缓存刷新 --- #### 2. **典型使用场景** ##### 场景 1：iframe 子页面刷新父窗口 ```html <!-- 父窗口代码 --> <iframe src="child.html"></iframe> <!-- 子窗口 (child.html) --> <script> // 用户操作后刷新父窗口 document.getElementById("refresh-btn").addEventListener("click", () => { window.parent.location.reload(); // 刷新父窗口 }); </script> ``` ##### 场景 2：多级嵌套窗口控制 ```javascript // 在孙级 iframe 中刷新顶级窗口 window.top.location.reload(true); // 强制刷新顶级页面 ``` --- #### 3. **安全限制与解决方案** 1. **同源策略限制** 若子页面与父窗口 **域名/协议/端口不一致**，浏览器会阻止跨域访问 `location` 对象。 **解决方案**： - 使用 `postMessage` 安全通信： ```javascript // 子页面发送消息 window.parent.postMessage("reloadParent", "https://parent-domain.com"); // 父页面监听 window.addEventListener("message", (event) => { if (event.origin !== "https://child-domain.com") return; if (event.data === "reloadParent") location.reload(); }); ``` - 在父窗口设置 `document.domain`（仅适用于相同基础域名）[^2]。 2. **避免循环刷新** 在 `beforeunload` 或 `unload` 事件中调用 `reload()` 可能导致死循环。 --- #### 4. **完整代码示例** ```html <!-- 父窗口 (parent.html) --> <iframe src="child.html"></iframe> <script> // 接收子窗口消息 window.addEventListener("message", (e) => { if (e.data === "RELOAD") location.reload(); }); </script> <!-- 子窗口 (child.html) --> <button onclick="refreshParent()">刷新父窗口</button> <script> function refreshParent() { try { // 尝试直接刷新（同源时生效） window.parent.location.reload(); } catch (e) { // 跨域时改用 postMessage window.parent.postMessage("RELOAD", "https://parent-domain.com"); } } </script> ``` --- #### 5. **关键注意事项** 1. **作用域链访问** 确保 `window.parent` 存在（非顶层窗口直接调用会报错），可通过检查避免错误[^2]： ```javascript if (window.parent !== window) { window.parent.location.reload(); } ``` 2. **函数提升问题** 若在函数表达式中使用，需注意提升（hoisting）问题，避免 `Uncaught TypeError`[^3]： ```javascript // ✅ 正确：函数声明会提升 initParentReload(); function initParentReload() { window.parent.location.reload(); } // ❌ 错误：变量初始化不会提升 const reloadParent = () => window.parent.location.reload(); reloadParent(); // 需在定义后调用 ``` --- ### 总结 | 方法 | 适用场景 | 跨域支持 | |-------------------------------|----------------------------|----------| | `window.parent.location.reload()` | 同源 iframe 控制父窗口刷新 | ❌ | | `postMessage()` | 跨域安全通信刷新父窗口 | ✅ | 通过合理选择方法，可安全实现父窗口刷新功能。实际开发中优先推荐 `postMessage` 方案以保证兼容性和安全性[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值