我想在頁腳 html 部分插入 2 個(gè)腳本，但我的行為很奇怪。如果我在 html 本身中使用標(biāo)簽手動插入，它就可以工作（index1.html）。但是，如果我使用 IIFE 創(chuàng)建標(biāo)簽并將它們插入到相同的位置和相同的順序 (index2.html)，則控制臺中會顯示一條錯誤，提示“虛擬變量未定義”。常識告訴我這個(gè)錯誤沒有問題（因?yàn)?dummy 是在使用后定義的），但為什么它適用于index1.html？索引1.html： ... <script src="script1.js" async></script> <script src="script2.js"></script> </body></html>索引2.html： ... <script> (function(){ var loadScript = function(data, callback) { var script = document.createElement('script'); script.src = data.src; if (data.opts) { if (data.opts.async) script.async = data.opts.async; } document.body.appendChild(script); } var loadScriptRecursive = function(scripts, index) { loadScript(scripts[index], function () { if (++index < scripts.length) loadScriptRecursive(scripts, index); }); } var scripts = [{src: 'script1.js'}, {src: 'script2.js', opts: {async: false}}]; loadScriptRecursive(scripts, 0); })() </script> </body></html>腳本1.js：$(document).ready(function () { if (dummy) ... ...}腳本2.js：var dummy = true
1 回答
犯罪嫌疑人X
TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊
首先，你聲明了callback但從未給我們它。我想你的意思是這樣的script.onload = callback;。
(function() {
? var loadScript = function(data, callback) {
? ? var script = document.createElement("script");
? ? script.src = data.src;
? ? script.onload = callback; // NEW LINE
? ? if (data.opts) {
? ? ? if (data.opts.async) script.async = data.opts.async;
? ? }
? ? document.body.appendChild(script);
? };
? var loadScriptRecursive = function(scripts, index) {
? ? loadScript(scripts[index], function() {
? ? ? if (++index < scripts.length) {
? ? ? ? loadScriptRecursive(scripts, index);
? ? ? }
? ? });
? };
讓我們看看文檔是怎么說的：
.ready() 方法提供了一種在頁面的文檔對象模型 (DOM) 變得可以安全操作后立即運(yùn)行 JavaScript 代碼的方法。
DOMContentLoaded 事件在初始 HTML 文檔完全加載和解析后觸發(fā)，無需等待樣式表、圖像和子框架完成加載。
在第一個(gè)示例中，DOMContentLoaded加載 JS 文件后觸發(fā)：
在第二個(gè)示例中，DOMContentLoaded立即觸發(fā)而不等待 JS 文件：
這就是為什么你需要使用$(window).on("load", function() {});而不是$(document).ready(function() {});
- 1 回答
- 0 關(guān)注
- 99 瀏覽
添加回答
舉報(bào)
0/150
提交
取消