外部 js 脚本在加载 jQuery 的页面上不起作用

Question

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

我有这个脚本 (load.js) 可以将 post 加载到我的 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");
});

这行得通，我可以在页面上获取 post。但是应该更改“post 加载”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 无法识别我的 post 中的 <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>

也在 post 内部，在 <div> 之前和之后，但没有区别。

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

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

Answer 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);
                    }
                }
            }
        });
    });

外部 js 脚本在加载 jQuery 的页面上不起作用

External js script won't work on pages loaded with jQuery

html

javascript

jquery

external

script

主页代码：

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

结果：