2

me encuentro desarrollando una aplicación híbrida, en JavaScript, HTML y CSS. He utilizado además cordova para lanzar un apk. Básicamente el index de cordova carga el index.html del cliente web, pero este index del cliente web debe cargar unos u otros en función de si se lanza en Android o un escritorio. Adjunto la cabecera del index.html del cliente web y sigo explicando.

<html>
 <head>
  <meta charset="utf-8" />
  <title>Tecnología</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="cliente/lib/pixi.js"></script>
  <script src="cliente/lib/traviso.dev.js"></script>
  <script src="cliente/src/main-traviso.js"></script>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link href="cliente/lib/jquery.toast.min.css" rel="stylesheet" type="text/css">


  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="cliente/lib/jquery.cookie.js"></script>
  <script src="cliente/lib/underscore-min.js"></script>
  <script src="cliente/lib/pagination.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

  <link rel="stylesheet" href="cliente/src/main.css">
  <link rel="stylesheet" href="cliente/src/sidebar-themes.css">


  <link rel="stylesheet" href="cliente/src/estilos.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
  <script src="cliente/src/cliente.js"></script>
  <script src="cliente/src/ini.js"></script> 
  <script src="cliente/src/control.js"></script> 
  <script src="cliente/src/pantalla-ejer.js"></script> 
  <script src="cliente/src/com.js"></script>     
  <!--<script src="cliente/lib/cordova.js"></script>
  <script src="cliente/lib/cordova_plugins.js"></script>-->
  <!-- Sentencia para conocer si es Android o no -->
  <script>
   window.mobileAndTabletcheck = function() {
   var check = false;
   (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
   return check;
   };
  </script>
  <script>
   if (!window.mobileAndTabletcheck()){
    document.write('<!--')
   }
  </script>   
  <script src="cliente/lib/cordova.js"></script>
  <script src="cliente/lib/cordova_plugins.js"></script>
  <script src="cliente/src/index.js"></script>
  <script>
   if (!window.mobileAndTabletcheck()){
    document.write('-->')
   } 
  </script>

</head>

Los archivos que debo de cargar en el momento en que se lanza desde un cliente Android son cordova.js, cordova_plugins.js e index.js. La forma en la que está actualmente es controlada con el if (!window.mobileAndTabletcheck()). El problema llega a la hora de recargar varias veces la página (en el escritorio del navegador), carga los archivos del cliente android, cuando sólo debería de hacerlo en ese preciso cliente. Mi pregunta, es si existe otra forma de realizar la carga de <script>de forma condicional en base a si se lanza desde un android o no. Gracias de antemano.

2
  • Cargar varias versiones de jQuery no me parece una buena idea... el 11 oct. 2019 a las 8:16
  • corregido, solo cargo uno. Se me coló el otro, pero me sigue sin funcionar lo comentado. el 11 oct. 2019 a las 8:23

1 respuesta 1

2

Tienes que esperar a que se hayan cargado y procesado para poder usar el código aportado por esas nuevas etiquetas. De todos modos creo que es más limpio si añades el código, en lugar de quitar comentarios. Puedes tener un array con los scripts a cargar según las elecciones y será más mantenible.

Aquí te pongo un ejemplo que inicialmente no carga ningún script de terceros, pero te deja elegir usar jQuery o Vuejs según pulsas un botón u otro:

function addScript(src,callback) {
  const script = document.createElement('script');
  script.setAttribute('src', src);
  document.head.appendChild(script);
  script.addEventListener('load', callback);
}

const jQueryUrl='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
const vueUrl='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js'

function codigoParaVue() {
    const app = new Vue({
      el: '#app',
      data: { message: 'Hello Vue!' }
    });
}

function codigoParajQuery() {
  $('#jq').text('CARGADO JQuery');
}

document.querySelector('#vue').addEventListener('click', function (e) {
  addScript(vueUrl, codigoParaVue);
});
document.querySelector('#jquery').addEventListener('click', function (e) {
addScript(jQueryUrl, codigoParajQuery);
});
<button id="vue"> Añade código de Vue</button>
<button id="jquery"> Añade código de jquery</button>
<div id="app">
  {{ message }}
</div>

<div id="jq"> No se ha cargado jQuery </div>

Para elegir qué script usar sigue valiendo la función que ya estabas usando, con lo que tu código quedaría algo como lo siguiente (NOTA: usaré una versión de la función que detecta si usas Firefox o Chrome):

function addScript(src,callback) {
  const script = document.createElement('script');
  script.setAttribute('src', src);
  document.head.appendChild(script);
  script.addEventListener('load', callback);
}

const jQueryUrl='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
const vueUrl='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js'

function codigoParaVue() {
    const app = new Vue({
      el: '#app',
      data: { message: 'Detectado WebKit!' }
    });
}

function codigoParajQuery() {
  $('#jq').text('CARGADO JQuery, no es WebKit');
}

//en lugar de tu window.mobileAndTabletcheck()
function esChrome() { 
  console.log(window.navigator.userAgent);
  return window.navigator.userAgent.includes("AppleWebKit");
}

if (esChrome()) {
  addScript(vueUrl, codigoParaVue);
} else {
  addScript(jQueryUrl, codigoParajQuery);
}
Uso JQuery si es Firefox, Vue en Chrome
<div id="app">
  {{ message }}
</div>

<div id="jq"> No se ha cargado jQuery </div>

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.