0

Estuve buscando y no encontré ninguna respuesta al respecto. Tengo un sitio sencillo que se maneja mediante AJAX las diferentes secciones.

Mi duda es como sería la forma correcta de incluir los scripts de javascript que corresponden a cada página. Me explico mejor:

Si estoy pidiendo contacto.html al final del archivo pongo un script para 'traer' el script con las interacciones que sean necesarias para ese HTML, pero no me lo estaría leyendo. Mando console.log cada vez que voy a una sección pero no lee los archivo JS es como si los ignorara.

Codigo AJAX:

function loadDynamic(){

  event.preventDefault();

  //Guardo el valor del atributo href al que se esta haciendo click
  let url = this.getAttribute('href');

  fetch(url).then(response => {
    if(response.ok){
      response.text().then(t => {
        content.innerHTML = t;
      })
    }else{
      content.innerHTML = "No se encontro la página solicitada";
    }
  })
  .catch(e => {
    content.innerHTML = "No se pudo conectar con el servidor";
  })
}

Y al final de los archivos HTML pongo por ejemplo:

<script src="js/prueba.js" type="text/javascript"></script>
6
  • ¿Puedes postear el código de cómo lo estás haciendo?
    – Jose Rojas
    Commented el 9 ene. 2019 a las 21:47
  • No entiendo bien la pregunta. Tienes algún código que podamos inspeccionar? La idea es que preguntes algo específico y que puedas proveer suficiente información para poder ayudarte. Lee ¿Cómo elaboro una buena pregunta?. Luego edita tu pregunta y así podremos ayudarte Commented el 9 ene. 2019 a las 21:48
  • ¿No trae los scripts o no se ejecutan cuando los añades al DOM?
    – gugadev
    Commented el 9 ene. 2019 a las 21:52
  • Disculpen ahí añadí código. Lo que quiero hacer es solamente incluir los Javascript a los HTML que lo necesiten y no incluirlos todos en el index por asi decirlo.
    – Airways
    Commented el 9 ene. 2019 a las 21:53
  • ¿loadDynamic desde dónde lo llamas?
    – Jose Rojas
    Commented el 9 ene. 2019 a las 22:04

1 respuesta 1

0

En términos generales, hay dos maneras de cargar un script dinámicamente. La manera de la vieja escuela y la moderna.

Old school

Para esto creas un elemento script y le añades la propiedad src.

function insertScript(url, cb) {
  var script = document.createElement('script')
  script.src = url
  script.async = true
  script.onload = cb
  document.head.appendChild(script)
}

Y lo usas así:

insertScript('/ruta/al/script', function() {
  // ejecutar tu código aquí
})

ES dynamic import

Esta es la nueva manera de hacerlo. Es una nueva API, actualmente en desarrollo pero funcional por medio de polyfills.

const foo = await import('/ruta/al/script')
// ejecutar código
foo.bar()
3
  • insertScript('/ruta/al/script', function() { // ejecutar tu código aquí }) ¿Esa parte estaria adentro de los tag's script en el HTML que estoy llamando o en que lugar?
    – Airways
    Commented el 9 ene. 2019 a las 22:21
  • Esa parte puede estar dentro del head de la página por ejemplo, en una etiqueta script. Ten en cuenta que por restricciones de seguridad debes cargar scripts de tu propio dominio, lee a cerca de CORS.
    – Redtiens
    Commented el 10 ene. 2019 a las 3:17
  • @Airways esa es la llamada a la función para insetar un nuevo script. Si estás en la página A y vas a la página B, vas a querer cargar el script de B en la página B. Entonces es aquí en donde debes llamar a la función.
    – gugadev
    Commented el 10 ene. 2019 a las 12:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.