为了更好地保护隐私和安全,现在需要明确允许在第三方 iframe 中进行 Web Share API 调用。
本文介绍了 Web Share API 中一项可能破坏兼容性的变更。此更改已在 Firefox 中实施,将在 Chrome 110 版中实施,并且预计很快会在 Safari 中实施。
借助 Web Share API,您可以分享文本、网址或文件。最简单的分享代码如下所示:
try {
await navigator.share({
title: 'Title',
text: 'Text',
url: location.href,
});
} catch (err) {
console.error(`${err.name}: ${err.message}`);
}
如果分享操作需要在第三方 iframe 中执行,近期的规范变更要求您明确允许执行此操作。为此,请向 <iframe>
标记添加 allow
属性,并将其值设为 web-share
。这会告知浏览器,嵌入网站允许嵌入的第三方 iframe 触发共享操作。
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Web Share in third-party iframes</h1>
<!-- The embedding page is hosted on https://example.com/index.html. -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
</body>
</html>
您可以在 Glitch 上的演示中查看此操作的实际运行情况,并查看源代码。如果未提供该属性,将会导致 NotAllowedError
并显示消息 Failed to execute 'share' on 'Navigator': Permission denied
。所有浏览器供应商都同意了此限制,目的是更好地保护用户的隐私和安全,并防止不良行为者(例如滥用广告)触发意外的分享操作。