为何在Safari中调用activeElement.blur()无法作用于iframe？

我之前也踩过Safari里iframe焦点管理的这个坑，直接调用document.activeElement.blur()确实经常不生效，给你几个经过验证的解决方案：

1. 用父页面的隐藏元素“抢占”焦点 #

Safari对iframe内部元素的blur操作支持不太友好，但我们可以通过让父页面的某个可聚焦元素获得焦点，间接让iframe失去焦点。

首先在父页面添加一个隐藏的输入框：

<input id="focus-stealer" style="position: absolute; opacity: 0; pointer-events: none; z-index: -9999;">

然后在触发iframe失焦的时机（比如输入框的blur事件，或者父页面的点击事件），调用这个隐藏输入框的focus()：

// 假设你能获取到iframe内部的输入框元素
const iframeInput = iframe.contentDocument.querySelector('input');
iframeInput.addEventListener('blur', () => {
  document.getElementById('focus-stealer').focus();
});

这个方法几乎在所有Safari版本里都能稳定生效。

2. 直接对iframe元素调用blur() #

有时候你可能操作错了对象——试试直接对iframe元素本身调用blur()，而不是它内部的activeElement：

const targetIframe = document.querySelector('iframe');
// 在需要让iframe失焦的时机执行
targetIframe.blur();

不过这个方法在部分旧版Safari里可能仍有问题，建议和上面的方法搭配使用。

3. 聚焦父页面的body元素 #

如果不想额外添加DOM元素，可以给父页面的body设置tabindex="-1"（让它能接收焦点），然后直接聚焦body：

<body tabindex="-1">
  <!-- 你的页面内容 -->
</body>

对应的JS代码：

document.body.focus();

这样也能把焦点从iframe拉回父页面。

为什么会出现这个问题？ #

Safari的焦点管理机制和Chrome、Firefox存在差异，它对跨iframe的焦点操作有更严格的限制，直接blur iframe内部的元素并不会主动将焦点归还给父页面，必须主动指定父页面的可聚焦元素来承接焦点。

内容的提问来源于stack exchange，提问作者nunoarruda