Nodejs中document.write加载js问题

Nodejs中document.write加载js问题

javascript文件的同步加载与异步加载实现原理 html文件中的<script>标签src属性所引用的js文件的代码内再使用document.write()方式引入的js文件是同步执行的

test.html <script type=“text/javascript” src=“test.js”></script> <script type=“text/javascript”> console.info(‘main page’); </script> tt

test.js document.write(’<script src=“http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>’); function load() { $(function() { console.info(‘test’) }); } load();

既然jquery.js是同步加载，下面调用 $应该没问题啊，可是为何报错呢？


9 回复

在Node.js环境中，document.write()方法并不存在，因为Node.js是一个用于服务器端开发的JavaScript运行环境，而document.write()是浏览器环境下的一个DOM操作方法。因此，在Node.js中直接使用document.write()来加载JavaScript文件是不适用的。

然而，如果你是在浏览器环境下遇到这个问题，那么让我们详细分析一下为什么会出现问题，并提供一些解决方案。

问题分析

你提到的HTML文件（test.html）尝试通过document.write()动态加载jQuery库。尽管document.write()本身是同步执行的，但这种方式并不推荐，因为它会阻塞页面渲染，并且在某些情况下（如页面已经加载完毕后再次调用document.write()），可能会导致整个页面被重写。

解决方案

使用<script>标签动态加载

你可以直接在HTML中使用标准的<script>标签来异步加载jQuery库，而不是使用document.write()。这不仅可以避免阻塞问题，还能提高页面加载速度。

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
        console.info('main page');
    </script>

    <!-- 动态加载jQuery -->
    <script>
        var script = document.createElement('script');
        script.src = 'https://libs.baidu.com/jquery/1.9.0/jquery.min.js';
        document.head.appendChild(script);
    </script>
</body>
</html>

使用Promise或async/await

为了确保jQuery加载完成后再执行其他代码，可以使用Promise或async/await来等待jQuery加载完成。

test.js

// 创建一个函数，返回一个Promise
function loadJquery() {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://libs.baidu.com/jquery/1.9.0/jquery.min.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

// 使用async/await等待jQuery加载完成
async function run() {
    try {
        await loadJquery();
        $(function() {
            console.info('test');
        });
    } catch (error) {
        console.error('Failed to load jQuery', error);
    }
}

run();

总结

  • document.write()不是最佳实践，尤其是在现代Web开发中。
  • 使用标准的<script>标签或创建动态<script>元素来加载外部JavaScript文件。
  • 为了确保依赖库加载完成，可以使用Promise或async/await来管理异步加载过程。

想说两点… ####1.那个单引号和双引号的问题让我有点纠结…还有那个在字符串中使用 / 会禁止解析斜杠后的单或双引号吧?..

####2.关于顺序的问题我测试了一下… #####实验一: test.html

<script>
	document.write("<script src='./test.js'><"+'/'+"script>");
	document.write("<script src='http://libs.baidu.com/jquery/1.9.0/jquery.js'><"+'/'+"script>");
	/*	关于斜杠的问题我觉得应该这么写..  */
	console.log("test2");
</script>

test.js

console.log("test1");

结果在chrome的console里的显示顺序是:

test2
test1

#####实验二: test.html

<script>
	document.write("<script src='./test.js'><"+'/'+"script>");
	console.log("test2");
	test1();
</script>

test.js

function test1(){
	console.log("test1");
}

结果显示:Uncaught ReferenceError: test1 is not defined

解释起来蛮简单，

你看看document.write写出来之后，dom节点在哪里？

在这个script标签之后。 document.write 调整了当前文档

当前html解析到哪里？

document.write所在的script节点

所以，你动态write进去的html，在你console的时候，在你调用$的时候，还没生效

浏览器如何解析html, how does browser work 这篇文章应该有帮助

document.write()方式引入的js文件是同步执行的。
不是说应该同步执行么？

这到底是同步执行还是异步执行？

document.write是同步的，问题是写完了html，没说同步解析你写入的html。 二楼的试验都狠清晰了

你想表达什么呢？ 没明白

使用document.write编写程序的前端是无知

在激烈的讨论中间，穿插这两个讨论格式的娃，不容易啊，枪林弹雨中抽个烟，解解乏。。。。

为什么要用document.write来加载脚本呢？ 只是为了证明浏览器的同步？ 浏览器在这里显然没有按照你设想的逻辑来处理，而使用更顺畅的方式来简化解析过程。为什么要掰弯浏览器呢？ 它只是遵循他的解析规则 至上而下解析,

lz如果你来写浏览器，你怎么写，怎么实现你心目中的同步梦想？

document.write() 在 Node.js 环境中并不可用，因为它主要用于浏览器环境来动态写入 HTML 文档。Node.js 是一个用于服务器端的 JavaScript 运行环境，因此它不包含浏览器特有的全局对象，如 document。

但是，如果你想在客户端（浏览器）环境中解决你的问题，你需要明白 document.write() 在页面加载完成后调用会覆盖整个页面，这可能并不是你想要的效果。此外，document.write() 引入的脚本是异步加载的，而不是同步的。

你的问题可能是由于 test.js 文件中的 document.write() 在 test.html 页面完全加载后被调用导致的。如果页面已经加载完毕，那么 document.write() 将会覆盖整个页面，从而可能导致 jQuery 没有正确加载。

你可以尝试将 <script> 标签直接放置在 HTML 文件中，以确保脚本按顺序加载：

<!-- test.html -->
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
    console.info('main page');
</script>

同时，在 test.js 中去掉 document.write() 的使用，并直接定义和调用函数：

// test.js
function load() {
    $(function() {
        console.info('test');
    });
}
load();

这样可以避免因 document.write() 引起的问题，并确保 jQuery 正确加载和使用。

回到顶部