外部 js 脚本不适用于使用 jQuery 加载的页面
Posted
技术标签:
【中文标题】外部 js 脚本不适用于使用 jQuery 加载的页面【英文标题】：External js script won't work on pages loaded with 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" ></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 中包含画布 【参考方案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);，会打印到控制台吗？以上是关于外部 js 脚本不适用于使用 jQuery 加载的页面的主要内容，如果未能解决你的问题，请参考以下文章