如何验证浏览器incumbent settings object tracking功能是否生效

MDN Promise 技术文档中关于 incumbent settings object 追踪的专项章节末尾明确说明：

前文示例中，仅在追踪incumbent settings object时，对应元素的内部文本才会更新；若不追踪incumbent settings object，可能会调用错误的执行环境发送消息。

但官方提供的示例存在明显缺陷：由于iframe为异步加载，存在时序竞争问题，部分场景下即便使用支持该特性的Firefox浏览器运行示例也会失效。根据公开兼容性数据，目前仅Firefox完整支持该特性，以下是修复了时序问题的可靠测试示例，可以直观验证不同浏览器的表现差异。

测试用例设计说明 #

• 核心修复点：主动控制iframe加载流程，等待所有测试iframe完全初始化后再触发Promise回调，彻底消除异步加载导致的偶发失效问题
• 判定逻辑：构造两个同源隐藏iframe，分别绑定不同的回调方法，通过Promise回调实际命中的上下文判断浏览器是否支持incumbent settings object追踪
  • 符合预期的正常表现：回调命中调用Promise时所在的第一个iframe上下文，页面目标元素文本正常更新
  • 不符合预期的异常表现：回调命中错误的第二个iframe上下文，目标元素文本保持初始值

完整可运行测试代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Incumbent Settings Object 测试</title>
    <style>
        .block {padding: 12px 16px; margin: 12px 0; border: 1px solid #ddd; border-radius: 4px;}
        iframe {display: none;}
    </style>
</head>
<body>
    <h3>Promise incumbent settings object 追踪特性测试</h3>
    <div class="block" id="target">目标元素文本：初始值</div>
    <div class="block" id="log"></div>

    <script>
        const target = document.getElementById('target');
        const logBox = document.getElementById('log');
        const iframeList = [];
        const needIframeNum = 2;
        let loadedCount = 0;

        function printLog(text) {
            logBox.innerHTML += `<p>${text}</p>`;
        }

        // 等待所有测试iframe加载完成再执行测试，消除时序问题
        function initTestEnv() {
            return new Promise(resolve => {
                const checkLoaded = () => {
                    if (loadedCount === needIframeNum) resolve(iframeList);
                };
                for (let i = 0; i < needIframeNum; i++) {
                    const iframe = document.createElement('iframe');
                    iframe.src = 'about:blank';
                    iframe.onload = () => {
                        iframeList.push(iframe);
                        loadedCount++;
                        checkLoaded();
                    };
                    document.body.appendChild(iframe);
                }
            });
        }

        initTestEnv().then(([frame1, frame2]) => {
            printLog('测试环境初始化完成，开始执行测试');
            // 共享父页面的Promise实例，模拟跨上下文调用场景
            frame1.contentWindow.Promise.resolve = Promise.resolve.bind(Promise);
            frame2.contentWindow.Promise.resolve = Promise.resolve.bind(Promise);

            // 分别给两个iframe注入不同的回调方法
            frame1.contentWindow.testCallback = () => {
                target.textContent = '目标元素文本：更新成功（命中正确上下文）';
                printLog('✅ 正常：incumbent settings object 追踪生效，命中第一个iframe的执行上下文');
            };
            frame2.contentWindow.testCallback = () => {
                printLog('❌ 异常：未追踪incumbent settings object，错误命中第二个iframe的执行上下文');
            };

            // 从第一个iframe上下文中取出回调，推入Promise微任务队列
            const testCallback = frame1.contentWindow.testCallback;
            Promise.resolve().then(testCallback);
        });
    </script>
</body>
</html>

测试操作步骤 #

• 将上述代码保存为本地HTML文件
• 分别使用Firefox、Chrome、Edge、Safari等浏览器打开该文件
• 观察页面上目标元素和日志区的输出即可得出结果：
  • Firefox：目标文本更新为成功提示，日志显示正常，证明该特性正常工作
  • 其他浏览器：目标文本保持初始值，日志显示命中错误上下文，证明未实现该特性

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