Question

这是一个Q＆amp; A-style-Thread，因为我找不到有这个问题的人/解决方案。

案例：

您有一个javascript，其中您使用window.open（' about：blank '，...）打开一个新窗口，并且您想通过设置myWindowReference.document.body.innerHTML = SOMETHING来设置其内容。

问题：

在Chrome，Edge，IE，Opera中运行良好但不在几个（可能是所有？）版本的Firefox 中。该页面仍为白色，但console.dir(myWindowReference.document.body.innerHTML);的日志消息是正确的。

示例代码：

<!doctype html>
<html>
    <head>
        <script>
        window.onload = () => {
            let wind = window.open('about:blank', 'someName', 'resizable,scrollbars');
            wind.document.body.innerHTML = "HALLO, das ist ein TEST";
            wind.document.title = "TEST";
            wind.focus();
            console.log("wind.document.body.innerHTML:");
            // OUTPUT IS CORRECT
           // but page is blank
            console.dir(wind.document.body.innerHTML);
        }
        </script>
    </head>
    <body></body>
</html>

Answer 1

<强>解决方案

我的猜测是Firefox不会在内部等待，直到窗口引用完全存在，因此不会更新GUI，而是在内部以某种方式更新它，以便console.dir(wind.document.body.innerHTML);无论如何都有正确的输出。我发现解决方案正在使用超时，以便Firefox有足够的时间在内部完全构建窗口引用。

<!doctype html>
<html>
    <head>
        <script>
        window.onload = () => {
            let wind = window.open('about:blank', 'someName', 'resizable,scrollbars');
            // [B] DOES WORK
            window.setTimeout(() => {
                wind.document.body.innerHTML = "HALLO, das ist ein TEST";
                wind.document.title = "TEST";
            }, 1)  // USING A TIMEOUT IS THE SOLUTION

            /* [A] DOESN't WORK
            wind.document.body.innerHTML = "HALLO, das ist ein TEST";
            wind.document.title = "TEST";
            */

            wind.focus();
            console.log("wind.document.body.innerHTML:");
            console.dir(wind.document.body.innerHTML);
            /*
            This log message is in either way ([A] and [B]) correct in Firefox.
            With [A] there is no content and no title set to the window, althrough it is visible.
            With [B] it works. Seems like Firefox is internally not waiting for the right reference/
            until the window is opened.
            */
        }
        </script>
    </head>
    <body></body>
</html>

Answer 2

解决方案2（更好的解决方案）：

发现没有必要使用＆＃34; about：blank＆＃34;在window.open（）中为空页面。因为＆＃34;关于：空白＆＃34;这是Firefox中的一个特殊页面，这可能是导致该错误的原因。只要把它留空就可以了。

<!doctype html>
<html>
    <head>
        <script>
        window.onload = () => {
            let wind = window.open('', 'someName', 'resizable,scrollbars');
            wind.document.body.innerHTML = "HALLO, das ist ein TEST";
            wind.document.title = "TEST";
            wind.focus();
        }
        </script>
    </head>
    <body></body>
</html>

无法在Firefox中设置body.innerHTML的新“about：blank” - 窗口（window.open（））

2 个答案: