首页html 监听script和link加载完在执行外部的js文件

html 监听script和link加载完在执行外部的js文件

时间: 2024-01-13 15:04:48 浏览: 211

可以使用JavaScript的load事件来监听script和link标签的加载完成事件。当一个外部脚本或样式表被成功加载后，它们会触发load事件。下面是一个示例代码，用于在所有外部脚本和样式表加载完成后执行一个JavaScript文件： ```html <!DOCTYPE html> <html> <head> <title>Example</title> <script src="path/to/your/main.js"></script> <link rel="stylesheet" href="path/to/your/style.css"> <script> function loadJS() { var scripts = document.getElementsByTagName("script"); var loadedScripts = 0; for (var i = 0; i < scripts.length; i++) { scripts[i].onload = function() { loadedScripts++; if (loadedScripts == scripts.length) { // 所有脚本都已加载完成，执行你的代码 console.log("All scripts loaded"); // 加载外部的js文件 var externalScript = document.createElement("script"); externalScript.src = "path/to/your/external.js"; document.body.appendChild(externalScript); } }; } } function loadCSS() { var links = document.getElementsByTagName("link"); var loadedLinks = 0; for (var i = 0; i < links.length; i++) { links[i].onload = function() { loadedLinks++; if (loadedLinks == links.length) { // 所有样式表都已加载完成，执行你的代码 console.log("All stylesheets loaded"); } }; } } loadJS(); loadCSS(); </script> </head> <body> </body> </html> ``` 这个示例代码通过遍历页面上的script和link标签，为它们添加了load事件监听器。当所有外部脚本和样式表都加载完成后，会先在控制台输出"All scripts loaded"和"All stylesheets loaded"，然后再动态地向页面添加一个外部的js文件。你可以将这个代码放到你的主JavaScript文件中，以便在页面加载时自动执行。

阅读全文