Estoy usando Laravel para implementar plantillas basadas en una página principal. Diferentes páginas tienen diferentes scripts JS, así que creé una plantilla para importar scripts JS:
<!-- jQuery 2.1.3 --> <script src="{{ URL::asset('plugins/jQuery/jQuery-2.1.4.min.js') }}"></script> <!-- Bootstrap 3.3.2 JS --> <script src="{{ URL::asset('js/bootstrap.min.js') }}" type="text/javascript"></script> <!-- Ajax Page Loading --> <script> function ajax(url) { $('.main-content').fadeOut(100); //hide the page $('.spinner').show(); // show a spinner $.ajax(url, { async: true, success: function(data) { $('#header').html(data[0]); //append received header to header $('#content').hide().html(data[1]).fadeIn(500); //show the page again $('body').append(data[2]); //append scripts to body $('.spinner').hide(); }, }); } </script> @yield('extra-scripts') <--- /* HERE is where the scripts will be */También estoy usando AJAX para cargar solo el contenido sin actualizar la página. La función ajax se usará para cargar cualquier url en el div "contenido". Sin embargo, también necesito cargar los scripts para que la página funcione correctamente.
El problema es que cada vez que estoy cargando la página, aparece este error:
XMLHttpRequest síncrono en el subproceso principal está obsoleto debido a sus efectos perjudiciales para la experiencia del usuario final. Para obtener más ayuda, consulte https://xhr.spec.whatwg.org/ .
No quiero que la carga del script afecte la experiencia del usuario. Tiene que ser asíncrono.
Esta advertencia seguirá ocurriendo mientras inyecte el script en el cuerpo del documento.
Recomiendo usar $.getScript ya que esto cargará el script correctamente. Realmente no entiendo por qué querrías que todos los javascript estuvieran en la misma página desde el principio. Probablemente desee tenerlos en un archivo separado de todos modos para facilitar el mantenimiento en el futuro y la separación de preocupaciones.
También puedes usar javascript vainilla para eso:
var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.setAttribute('src','your_script.js'); head.appendChild(script); Si insiste en hacerlo de esta manera, intente inyectarlo directamente en el head del documento y no en el body y vea si eso ayuda.
En una nota más general, parece que está creando una aplicación de una sola página (SPA), ¿ha examinado marcos JS como Angular , Backbone , etc.? ellos manejarán todo el trabajo pesado por usted y lo ayudarán a escalar mejor su aplicación. Esto huele un poco a tratar de reinventar la rueda y podría ser una gran cosa como un proceso educativo, pero podría no ser una buena idea a largo plazo.
Espero que esto ayude.
Lo que está haciendo en este momento no es una buena práctica. Si desea cargar páginas usando Ajax y llamar dinámicamente a los archivos Js, le recomendaría que use pjax .
Eche un vistazo aquí: https://github.com/defunkt/jquery-pjax
Como está utilizando laravel , puede implementarlo fácilmente en pjax .
Aquí hay un tutorial: https://laracasts.com/lessons/faster-page-loads-with-pjax