外部 js 脚本不适用于使用 jQuery 加载的页面答案

【问题标题】：External js script won't work on pages loaded with jQuery外部 js 脚本不适用于使用 jQuery 加载的页面
【发布时间】：2021-12-28 11:24:38
【问题描述】：

我正在尝试使用 jQuery 将 html 帖子加载到我的主 html 页面中，并让外部脚本对其进行处理。

我有这个脚本 (load.js) 可以将帖子加载到我的 index.html 页面中：

$(document).ready(function () {

    $('#header').load("./Includes/include_header.html");
    $('#footer').load("./Includes/include_footer.html");
    $('#navbar').load("./Includes/include_navbar.html");

    // Posts
    $('#post3').load("./Posts/2021-11-16-Starting-Book-of-Shaders.html");
    $('#post2').load("./Posts/2021-11-12-Lecture-1.html");
    $('#post1').load("./Posts/2021-11-12-Start.html");
});

这可行，我可以在页面上获取帖子。但是应该更改“加载后”html 页面的脚本将不起作用。

在我的 index.html 的 <head> 我有这个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/Includes/load.js"></script>


<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js" defer></script>

但 GlslCanvas.js 无法识别我帖子中的 <canvas> 元素（在本例中为“2021-11-16-Starting-Book-of-Shaders.html”）：

<div class="card">
    <h2>Getting started with The Book of Shaders</h2>
    <p>Testing the very first, most basic example:</p>
    <canvas class="glslCanvas" data-fragment-url="/Shaders/test.frag" width="400" height="400"></canvas>
</div>

test.frag 文件由以下几行组成：

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
    gl_FragColor = vec4(0.8196, 0.7804, 0.2235, 1.0);
}

我已尝试包含以下行：

<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js" defer></script>

在帖子内部，<div> 之前和之后也是如此，但没有区别。

我应该怎么做才能让脚本识别<canvas> 元素？

编辑：我可以通过将<canvas class="glslCanvas" data-fragment-url="/Shaders/test.frag" width="400" height="400"></canvas> 直接放在我的索引页的<body> 内来确认它是否有效。没有问题。

【问题讨论】：

不清楚包含的html中是否有脚本。
也许这个github.com/patriciogonzalezvivo/glslCanvas/issues/42
我认为该链接是在讨论在您的代码中包含其他着色器，而不是如何在 html 中包含画布

标签： javascript html jquery external script

【解决方案1】：

    let deferreds = [];
    function load(selector, path) {
        const def = new $.Deferred()
        deferreds.push(def);
        $(selector).load(path, () => def.resolve());
    }

    $(document).ready(function () {
        load('#header', "./Includes/include_header.html");
        load('#footer', "./Includes/include_footer.html");
        load('#navbar', "./Includes/include_navbar.html");

        // Posts
        load('#post3', "./Posts/2021-11-16-Starting-Book-of-Shaders.html");
        load('#post2', "./Posts/2021-11-12-Lecture-1.html"),
        load('#post1', "./Posts/2021-11-12-Start.html")
            
        $.when.apply(null, deferreds).done(function() { 
            var list = document.getElementsByClassName('glslCanvas');
            
            if (list.length > 0) {
                window.glslCanvases = [];
                for (var i = 0; i < list.length; i++) {
                    var sandbox = new GlslCanvas(list[i]);
                    if (sandbox.isValid) {
                        window.glslCanvases.push(sandbox);
                    }
                }
            }
        });
    });

主页代码：

加载页面代码（load.html）：

结果：

【讨论】：

我不得不删除函数末尾的括号，然后调用它才不会出现任何错误，如下所示：loadAllGlslCanvas(); 但它仍然不起作用
尝试删除 GlslCanvas 连接字符串中的 defer
刚试了，没成功
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
如果在var list = document.getElementsByClassName('glslCanvas');后面加上console.log(list);，会打印到控制台吗？