window.location.href与document.location.origin区别
时间: 2024-06-08 08:05:14 浏览: 249
`window.location.href`是一个字符串,它包含了当前页面的完整 URL,包括协议、域名、路径和查询参数等信息。可以通过修改`window.location.href`的值来实现页面重定向。
`document.location.origin`是一个只读属性,返回当前页面的协议、域名和端口号。它不包含路径和查询参数等信息,仅用于获取页面基础的 URL 信息。
例如,假设当前页面的 URL 是 `https://example.com/path/to/page.html?param=value`,那么:
- `window.location.href` 的值为 `https://example.com/path/to/page.html?param=value`
- `document.location.origin` 的值为 `https://example.com`
因此,`window.location.href` 和 `document.location.origin` 的作用有所区别,前者用于页面跳转和重定向,后者用于获取页面基础 URL 信息。
相关问题
vue2获取window.open打开的指定其他页面的关闭事件
在Vue.js 2.x中,想要监听窗口`window.open()`打开的新页面并捕获其关闭事件,可以使用JavaScript的`addEventListener`方法来添加事件监听。但是需要注意的是,由于浏览器的安全限制,直接监听新窗口的关闭事件通常是不可行的,因为这涉及到跨域问题。
你可以尝试以下方法:
1. **通过查询历史记录**:如果新窗口是你应用的一部分,并且你知道它会有一个特定的历史记录条目,你可以定期检查这个条目的存在与否来推测窗口是否已经关闭。
```javascript
// 假设你有个变量保存新窗口的引用
let newWindow;
window.addEventListener('popstate', function() {
if (newWindow && !window.location.href.includes('/your/path')) { // 当前路径与预期不符时
console.log('新窗口已关闭');
// 在这里处理窗口关闭的逻辑
newWindow = null;
}
});
```
2. **利用iframe通信**:如果你有控制权去创建那个新窗口,并且两者在同一域名下,可以在它们之间建立一个iframe通道来传递消息,当新窗口关闭时,通知主窗口。
```javascript
newWindow = window.open('/new-page', '_blank', 'width=500,height=400');
// 创建一个在两个窗口间通信的函数
const sendMessageToNewWindow = (message) => {
const iframe = document.getElementById('communicationIframe');
if (iframe.contentWindow) {
iframe.contentWindow.postMessage(message, '*');
}
}
// 新窗口关闭时发送关闭信号
newWindow.onunload = function() {
sendMessageToNewWindow('window-closed');
};
// 主窗口监听来自新窗口的消息
window.addEventListener('message', function(event) {
if (event.origin === 'http://yourdomain.com') {
if (event.data === 'window-closed') {
console.log('新窗口已关闭');
newWindow = null;
}
}
}, false);
```
请注意,这些方法都可能存在兼容性和性能问题,而且并不是标准做法。最好的解决方案是尽量避免在用户无感知的情况下打开新窗口,除非你能确保有更好的交互机制来同步状态变化。
js location
在JavaScript中,location对象用于获取或设置窗体的URL,并且可以用于解析URL。可以通过window.location和document.location来访问location属性。如果想要获得当前文档的完整URL字符串,可以使用以下四种方式:document.location、document.location.href、document.URL和document.location.toString()。location对象还可以通过访问其属性来获取URL的不同部分,如protocol、host、hostname、port、pathname、search、origin和hash。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [js中location对象详解](https://blog.csdn.net/weixin_45112114/article/details/123529006)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [JS之location对象详解](https://blog.csdn.net/m0_65335111/article/details/127057157)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [JS中Location使用详解](https://download.csdn.net/download/weixin_38506138/13031642)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
阅读全文