【Bug已解决】Focus tab after screenshot capture getDisplayMedia API 解决方案一、现象长什么样你用getDisplayMedia做屏幕截图/录屏时遇到的焦点问题还有这些变体与 946 同主题本篇从捕获标签页时的具体陷阱切入你选了共享某个标签页但该标签页此刻是最小化或被其他窗口盖住截出来是黑的/空白截图成功后原控制页失去了键盘焦点正在输入的文本框丢失光标在共享标签页模式下被共享的标签页会被浏览器强制置于前台并失焦控制页你无法同时看控制 UI 和被截内容你尝试在getDisplayMedia的onended里window.focus()拉回焦点但无效多显示器场景下焦点和显示器归属更混乱。一句话本篇聚焦共享标签页模式特有的陷阱浏览器为保证你在看被共享的标签页会把控制页推到后台导致截图 UI 与捕获目标分离、焦点丢失——这是 Chrome 等浏览器对标签页共享的强制行为需要靠交互设计规避而非代码强抢焦点。二、背景getDisplayMedia支持三种共享目标整个屏幕、应用窗口、单个标签页。标签页共享模式有个特殊行为当你选择共享某个标签页浏览器会确保该标签页可见置前你的控制页因此被挤到后台。结果是你想在控制页点截图按钮 → 但控制页已不在前台 → 你点不到你截到的标签页画面里控制页的 UI 不在其中因为控制页在后台截图完成、track.stop()后控制页不会自动回前台浏览器不替你管。另外出于防滥用Chrome 对window.focus()跨窗口/跨标签的调用在有用户手势时也只是尽力而为多数情况下被忽略。所以程序级自动 focus 回控制页不可靠。三、根因根因是标签页共享模式强制把控制页推后台且浏览器不允许网页可靠地夺回焦点选共享标签页X - 浏览器把 X 置前控制页 Y 退后台 - Y 失去焦点按钮点不到截图 UI 看不见 - 你用 window.focus() 拉 Y 回前台 - 浏览器忽略无可靠跨标签抢焦点修复方向避免控制页与被截标签页分离——要么把截图控件放在被截页面里同源同标签要么改用应用窗口共享/整个屏幕共享让控制页可见要么用用户手势 UI 提示让用户手动切回。四、最小可运行复现// 思路把截图控件放在会被截的同一页面避免跨标签焦点问题 // 在被截页面里 async function selfScreenshot() { // 产生用户手势按钮点击 const stream await navigator.mediaDevices.getDisplayMedia({ video: true }); const track stream.getVideoTracks()[0]; // 用 video canvas 截图同页内完成无需切标签 const video document.createElement(video); video.srcObject stream; await video.play(); const canvas document.createElement(canvas); canvas.width video.videoWidth; canvas.height video.videoHeight; canvas.getContext(2d).drawImage(video, 0, 0); const url canvas.toDataURL(image/png); track.stop(); // 同页内展示截图焦点不丢失 document.body.insertAdjacentHTML(beforeend, img src${url} stylemax-width:300px); return url; }运行后截图与展示都在同一页完成绕开了控制页被推后台的跨标签焦点问题。五、解决方案第一层最小直接修复最小修复是避免跨标签页焦点依赖把截图控件放在被截页面自身同源同标签截图、展示、下载都在本页完成若必须用独立控制页改用整个屏幕或应用窗口共享而非标签页共享这样控制页仍可见截图动作必须由用户点击按钮用户手势触发并在点击后立即开始捕获捕获结束后不要依赖window.focus()而是 UI 提示请切回控制页。button.addEventListener(click, async () { // 用户手势内立即发起减少焦点窗口期 const stream await navigator.mediaDevices.getDisplayMedia({ video: true }); // ... 截图 ... });六、解决方案第二层结构化改进把截图焦点策略做成策略区分共享模式并给出对应规避from dataclasses import dataclass, field from typing import Callable, List dataclass(frozenTrue) class GetDisplayMediaFocusV2Policy: 截图焦点策略 v2按共享模式给规避方案。 规则 - 标签页共享控件必须与被截页同源同标签 - 屏幕/窗口共享控制页可见可用手势维持 - 不依赖 window.focus() 跨标签抢焦点 def recommend(self, share_mode: str, same_tab: bool) - List[str]: if share_mode tab and not same_tab: return [ 标签页共享会把控制页推后台请将截图控件放在被截页同标签, 或改用屏幕/窗口共享让控制页可见, ] return [用按钮点击用户手势触发捕获即可] def pre_capture(self, has_focus: Callable[[], bool]) - str: if not has_focus(): return 当前页未聚焦请先点本页再截图 return ok def demo() - None: policy GetDisplayMediaFocusV2Policy() print(policy.recommend(tab, same_tabFalse)) print(policy.pre_capture(lambda: True)) if __name__ __main__: demo()七、解决方案第三层断言 / CI 守护import pytest from your_module import GetDisplayMediaFocusV2Policy def test_tab_mode_same_tab_ok(): policy GetDisplayMediaFocusV2Policy() assert policy.recommend(tab, same_tabTrue) [用按钮点击用户手势触发捕获即可] def test_tab_mode_cross_tab_warns(): policy GetDisplayMediaFocusV2Policy() rec policy.recommend(tab, same_tabFalse) assert any(同标签 in r for r in rec) def test_screen_mode_ok(): policy GetDisplayMediaFocusV2Policy() assert policy.recommend(screen, same_tabFalse) [用按钮点击用户手势触发捕获即可] def test_unfocused_prompts(): policy GetDisplayMediaFocusV2Policy() assert 请先点本页 in policy.pre_capture(lambda: False) def test_focused_ok(): policy GetDisplayMediaFocusV2Policy() assert policy.pre_capture(lambda: True) ok def test_recommend_returns_list(): policy GetDisplayMediaFocusV2Policy() assert isinstance(policy.recommend(tab, False), list)CI 在截图功能测试里断言标签页共享模式下截图控件与被截内容同源同标签或改用屏幕共享且不依赖跨标签window.focus()。八、排查清单是否用了标签页共享模式它会把控制页推后台。截图控件是否与被截页同源同标签不同标签必丢焦点。是否改用屏幕/窗口共享让控制页可见截图是否由用户点击按钮手势触发手势能缩短焦点窗口期。是否误依赖window.focus()跨标签抢焦点浏览器会忽略。多显示器下焦点更乱尽量同屏、同标签操作。九、小结getDisplayMedia截图时标签页共享模式会把控制页推后台、丢失焦点根因是浏览器对标签页共享的强制置前行为且不允许网页可靠跨标签夺回焦点。本篇从共享模式陷阱切入最小修复是把截图控件放在被截页同标签、或改用屏幕/窗口共享、用用户手势触发结构化做法是抽成GetDisplayMediaFocusV2Policy按模式给规避最后用 pytest 守护标签页模式控件同标签、不依赖跨标签 focus消除焦点混乱。