Clients: openWindow() 方法
注意:此功能仅在 Service Workers 中可用。
Clients 接口的 openWindow() 方法会创建一个新的顶级浏览上下文并加载指定的 URL。如果调用脚本没有显示弹出窗口的权限,openWindow() 将会抛出 InvalidAccessError 异常。
在 Firefox 中,只有在作为通知点击事件的结果调用时,才允许使用此方法显示弹出窗口。
在 Android 版 Chrome 中,该方法可能会在用户主屏幕上已添加的独立 Web 应用提供的现有浏览上下文中打开 URL。最近,这也适用于 Windows 版 Chrome。
语法
js
openWindow(url)
参数
url-
一个字符串,代表您想在窗口中打开的客户端的 URL。通常,此值必须与调用脚本同源。
返回值
一个 Promise,如果 URL 与 Service Worker 同源,则解析为 WindowClient 对象;否则解析为 null 值。
异常
InvalidAccessErrorDOMException-
如果应用程序源中的所有窗口都没有 瞬时激活,则 Promise 将会因该异常而被拒绝。
安全要求
- 应用程序源中的至少一个窗口必须具有 瞬时激活。
示例
js
// Send notification to OS if applicable
if (self.Notification.permission === "granted") {
const notificationObject = {
body: "Click here to view your messages.",
data: { url: `${self.location.origin}/some/path` },
// data: { url: 'http://example.com' },
};
self.registration.showNotification(
"You've got messages!",
notificationObject,
);
}
// Notification click event listener
self.addEventListener("notificationclick", (e) => {
// Close the notification popout
e.notification.close();
// Get all the Window clients
e.waitUntil(
clients.matchAll({ type: "window" }).then((clientsArr) => {
const windowToFocus = clientsArr.find(
(windowClient) => windowClient.url === e.notification.data.url,
);
if (windowToFocus) {
// If a Window tab matching the targeted URL already exists, focus that;
windowToFocus.focus();
} else {
// Otherwise, open a new tab to the applicable URL and focus it.
clients
.openWindow(e.notification.data.url)
.then((windowClient) => (windowClient ? windowClient.focus() : null));
}
}),
);
});
规范
| 规范 |
|---|
| Service Workers # clients-openwindow |
浏览器兼容性
加载中…