Clients.openWindow()

在此页

句法
范例
规范
浏览器兼容性
相关话题

openWindow() 方法在 Clients interface creates a new top level browsing context and loads a given URL. If the calling script doesn't have permission to show popups, openWindow() will throw an InvalidAccessError .

In Firefox, the method is allowed to show popups only when called as the result of a notification click event.

In Chrome for Android, the method may instead open the URL in an existing browsing context provided by a standalone web app previously added to the user's home screen. As of recently, this also works on Chrome for Windows.

句法

self.clients.openWindow(url).then(function(windowClient) {
  // Do something with your WindowClient
});

参数

url: USVString representing the URL of the client you want to open in the window. Generally this value must be a URL from the same origin as the calling script.

返回值


									Promise

解析为


									WindowClient

object if the URL is from the same origin as the service worker or a null value 否则。

范例

// 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 => {
    // If a Window tab matching the targeted URL already exists, focus that;
    const hadWindowToFocus = clientsArr.some(windowClient => windowClient.url === e.notification.data.url ? (windowClient.focus(), true) : false);
    // Otherwise, open a new tab to the applicable URL and focus it.
    if (!hadWindowToFocus) clients.openWindow(e.notification.data.url).then(windowClient => windowClient ? windowClient.focus() : null);
  }));
});

规范

规范	状态	注释
服务工作者 The definition of 'Clients: openWindow' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`openWindow`	Chrome 40 40 42 注意事项 Can only open URLs on the same origin. 43 注意事项 Can open any URL. 51 注意事项 URLs may open inside an existing browsing context provided by a standalone web app	Edge ≤79 ≤79 ≤79 注意事项 Can only open URLs on the same origin. ≤79 注意事项 Can open any URL. ≤79 注意事项 URLs may open inside an existing browsing context provided by a standalone web app	Firefox 45 注意事项 45 注意事项 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.	IE 不支持 No	Opera 38	Safari 不支持 No	WebView Android 40 40 42 注意事项 Can only open URLs on the same origin. 43 注意事项 Can open any URL. 51 注意事项 URLs may open inside an existing browsing context provided by a standalone web app	Chrome Android 40 40 42 注意事项 Can only open URLs on the same origin. 43 注意事项 Can open any URL. 51 注意事项 URLs may open inside an existing browsing context provided by a standalone web app	Firefox Android 45	Opera Android 41	Safari iOS 不支持 No	Samsung Internet Android 4.0 4.0 5.0 注意事项 URLs may open inside an existing browsing context provided by a standalone web app

图例

完整支持
不支持
实验。期望将来行为有所改变。

元数据

最后修改： Jun 23, 2020

服务工作者 API
Clients
方法
1. claim()
2. get()
3. matchAll()
4. openWindow()
Related pages for Service Workers API

在此页

句法

参数

返回值

范例

规范

浏览器兼容性

图例

相关话题