Cargar Widget externo con AJAX.
Publicado por Miguel Angel (3 intervenciones) el 29/04/2021 09:41:10
Hola amigos de La Web del Programador, a ver si podéis echarme un cable con un un problemilla que no se como solucionar.
En una página Web que estoy desarrollando, su archivo principal index.html, después de la cabecera y de la barra de navegación, se compone de dos bloques: un <section> que ocupa 8 columnas y un <aside> de 4 (utlizo bootstrap 4). El <aside> va albergar una serie de contenidos repetitivos que van a ser visibles a lo largo de todo el sitio Web, por tanto quedaría algo así:
El contenido común a todas las secciones del sitio Web se guarda en otro fichero aparte llamado lateral.html, en el que, entre otras cosas me gustaría incluir un widget externo que se compone de un <div> con un enlace <a> en su interior y dos etiquetas <script>:
Y aquí precisamente es donde estriba el problema, ya que al intentar cargar este archivo lateral.html en el <aside> de index.html, lo hago utilizando un script llamado cargaLateral.js en el que utilizo la función load de
de jQuery:
El div con el enlace en su interior si lo carga correctamente pero las dos etiquetas <script> no, ya que no se muestran en pantalla cuando ejecuto index.html en el navegador. He intentado hacer un callback en el que después de que se cargue lateral.html, incluya también las dos etiquetas <script> mediante las funciones de jQuery getScript, get y html, sin obtener ningun resultado positivo:
Desconozco en que me estoy equivocando o simplemente lo que intento hacer no puede ni debe hacerse, ya que de antemano reconozco que mis conocimientos de jQuery son limitados.
Agradezco infinitamente a todas aquellas personas que dediquen algo de su valioso tiempo a intentar darle solución a este problema que me ha surgido.
Gracias de nuevo de corazón, os saluda atentamente:
Miguel Ángel.
En una página Web que estoy desarrollando, su archivo principal index.html, después de la cabecera y de la barra de navegación, se compone de dos bloques: un <section> que ocupa 8 columnas y un <aside> de 4 (utlizo bootstrap 4). El <aside> va albergar una serie de contenidos repetitivos que van a ser visibles a lo largo de todo el sitio Web, por tanto quedaría algo así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<div class="container">
<div class="row">
<div class="col-8">
<p>Lorem ipsum...</p>
</div>
<!--Aqui incluyo una serie contenidos comunes a todas las secciones de la página Web.--><aside class="col-4"></aside>
</div>
</div>
<!--jQuery primero, luego Popper.js, luego Bootstrap JS--><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--Este archivo cargaLateral.js se encargará de cargar en el <aside> mediante AJAX el fichero con los contenidos comunes al sitio Web.--><script type="text/javascript" src="js/cargaLateral.js"></script>
</body>
1
2
3
4
5
6
7
<div style="font-size: 1em;line-height: 1em;background: #000;color: #fff;margin: 0 auto;padding: 0.3em 0;width:90%;text-align:center">
<a target="_blank" style="color:#FFF;text-decoration:none" href="https://www.siguetuliga.com/liga/primera-division-laliga-santander/clasificacion?utm_source=widget2&utm_medium=webs%2Bo%2Bblogs&utm_campaign=Widgets%2Bresultados">
Clasificacion Nacional Primera División LaLiga Santander
</a>
</div>
<script type="text/javascript">widthIcon = "14";heightIcon = "14";</script>
<script language="javascript" src="https://www.siguetuliga.com/widget/clasificacion2.php?id=24" charset="iso-8859-1"></script>
de jQuery:
1
2
3
$(document).ready(function(){
$("aside").load("lateral.html");
});
1
2
3
4
5
$(document).ready(function(){
$("aside").load("lateral.html", function(){
$("aside").getScript('<script language="javascript" src="https://www.siguetuliga.com/widget/clasificacion2.php?id=24" charset="iso-8859-1"></script>');
});
});
Agradezco infinitamente a todas aquellas personas que dediquen algo de su valioso tiempo a intentar darle solución a este problema que me ha surgido.
Gracias de nuevo de corazón, os saluda atentamente:
Miguel Ángel.
Valora esta pregunta
0