Nodejs中requirejs加载文件是否不能放document.write语句？

Nodejs中requirejs加载文件是否不能放document.write语句？

怎么一放，页面马上变空白了呢？ 放在所有require()语句前，那个时候页面输出流应该没有完成吧，那个时候调用document.write怎么也会导致页面空白？ 迷惑了。。。

9 回复

Node.js 中 require.js 加载文件是否不能放 document.write 语句？

问题描述

有人在使用 Node.js 和 Require.js 时遇到了一个问题：当他们在加载文件中放入 document.write 语句时，页面会立即变为空白。他们将 document.write 语句放在所有的 require() 语句之前，认为此时页面的输出流还没有完成，但仍然导致了页面空白。

原因分析

首先，需要明确的是，document.write 是一种在浏览器环境中动态向页面写入内容的方法。而在 Node.js 环境中，并没有 document 对象，因此 document.write 在 Node.js 中是无法使用的。这是导致页面变为空白的主要原因之一。

示例代码

假设我们有以下 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Page</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        // 这里尝试使用 document.write，会导致错误
        document.write('Hello, World!');

        require(['main'], function(main) {
            main.init();
        });
    </script>
</body>
</html>

如果我们将这段代码直接运行在浏览器环境中，可能会遇到错误，因为 document.write 只能在页面加载时使用，否则会覆盖整个页面内容。

正确的做法

正确的做法是在页面加载完成后使用 document.write，或者使用其他方法来动态修改页面内容。例如，可以使用 innerHTML 或者 appendChild 方法来实现类似的效果：

document.addEventListener("DOMContentLoaded", function() {
    document.body.innerHTML += '<p>Hello, World!</p>';

    require(['main'], function(main) {
        main.init();
    });
});

总结

在 Node.js 中，由于没有 document 对象，document.write 语句无法使用。即使在浏览器环境中，也应谨慎使用 document.write，特别是在页面加载完成后。推荐使用现代的 DOM 操作方法来动态修改页面内容。


异步加载的js中 放置 document.write就不行了

异步调用有先后，完成顺序不一定和调用顺序一样。 但是不调用异步接口，中间直接写的还是阻塞代码么？ 如果是的话，那应该先于异步代码执行啊，也不至于导致页面空白的。。。 可是页面就无耻的空白了：（

这个跟后端没关系， 现在的浏览器编写，不要用document.write()，用innerHTML或者createTextNode。 如果页面load后，调用document.write()，会把所有html内容替换为document.write()内的字符串。

你试试用console.log()

个人的浅见：require.js异步调用时，文件执行在回调中完成，按照： “异步加载的外引js，js里面写document.write, 但是document.write放在回调中， 这时候document.write触发是通过回调，没有具体位置，这时候如果页面已经close了， 会主动调用一次document.open,然后才write，这时候就是重写了。” 具体可以参考require.js源码：execb function。 仅供参考。

open不是重新打开一个页面么？为了写入信息打开一个新的页面，好像没这么干的

是 document.open ，打开当前文档；在 dom 构建完毕之后 document.write 就是会重写整个 document 的

在Node.js环境中使用requirejs本身是不合适的，因为requirejs（或require）主要用于浏览器端的模块加载，而Node.js有其自己的模块系统。如果你是在浏览器环境中使用requirejs遇到问题，那么document.write语句确实可能会导致页面变空白。

在浏览器环境中，document.write会在当前文档的HTML流中插入内容。如果在页面加载完成后执行document.write，它会清除当前文档内容并重新开始一个文档流，这通常会导致页面变为空白。

示例代码

假设你在某个JavaScript文件中使用了requirejs来加载模块，并尝试在模块加载后使用document.write来写入内容：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script>
        requirejs(['yourModule'], function(yourModule) {
            document.write('Hello, World!');
        });
    </script>
</body>
</html>

在这个例子中，即使requirejs加载完你的模块，document.write也会覆盖整个页面内容，导致页面变为空白。

解决方案

为了避免这种情况，你可以使用其他方法来插入内容，比如使用DOM操作：

requirejs(['yourModule'], function(yourModule) {
    const div = document.createElement('div');
    div.textContent = 'Hello, World!';
    document.body.appendChild(div);
});

这种方式不会覆盖整个页面内容，而是将内容添加到指定位置。

总结

在浏览器环境中，不要使用document.write来插入内容。使用DOM操作方法（如appendChild）可以更安全地将内容添加到页面上。

回到顶部