0
147
ViewsEl script js externo no funcionará en páginas cargadas con jQuery
Estoy tratando de usar jQuery para cargar publicaciones html en mi página html principal y hacer que los scripts externos funcionen en ellas.
Tengo este script (load.js) para cargar publicaciones en mi página 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"); });Esto funciona y puedo obtener las publicaciones en la página. Pero las secuencias de comandos que deberían cambiar la página html "después de la carga" no funcionarán.
En el <head> de mi index.html tengo esto.
<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> pero GlslCanvas.js no reconocerá el elemento <canvas> dentro de mi publicación (en este ejemplo, "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> El archivo test.frag se compone de estas pocas líneas:
#ifdef GL_ES precision mediump float; #endif uniform float u_time; void main() { gl_FragColor = vec4(0.8196, 0.7804, 0.2235, 1.0); }He intentado incluir la línea:
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js" defer></script> dentro de las publicaciones también, antes y después del <div> pero no hace ninguna diferencia.
¿Qué debo hacer para que el script reconozca el elemento <canvas> ?
Editar: puedo confirmar que funciona colocando <canvas class="glslCanvas" data-fragment-url="/Shaders/test.frag" width="400" height="400"></canvas> directamente dentro del <body> de mi página de índice. No hay problemas allí.
1 answers
Answer question0
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); } } } }); });código de la página principal:
cargando el código de la página (load.html):
resultado:
