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

Question

我正在尝试使用 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>

我试图包括以下行：

<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>我的索引页。 那里没有问题。

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 的页面上不起作用

问题描述

1 个解决方案

解决方案1
0 2021-11-17 13:46:40

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

问题描述

1 个解决方案

解决方案1 0 2021-11-17 13:46:40

解决方案1
0 2021-11-17 13:46:40