异步加载/附加JS脚本

Question

我正在使用Laravel来实现基于主页的模板.不同的页面有不同的JS脚本,所以我创建了一个模板来导入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 */

我也使用AJAX只加载内容而不刷新页面.函数ajax将用于将任何url加载到div"content"中.但是,我还需要加载脚本以使页面正常工作.

数据是一个包含三个字段的数组:

• 0是Header html
• 1是内容html
• 2是动态添加的脚本

问题是每当我加载页面时,我都会收到此错误:

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用.如需更多帮助,请查看https://xhr.spec.whatwg.org/.

我不希望脚本加载影响用户体验.必须是异步的.

我已经尝试过的:

• jQuery.getScript

  • 此解决方案要求我将所有脚本移动到单独的JS文件中.这可能会解决它,但我宁愿将它们全部保存在相应的页面中.

• AjaxPreFilter

  • 带有options.async = true的$ .ajaxPrefilter使脚本在页面后加载,从而使某些属性未定义且无法正常工作.

Answer 1

只要您将脚本注入文档正文，此警告就会继续发生。

我建议使用，$.getScript因为这将正确加载脚本。我真的不明白为什么你希望所有的 JavaScript 从一开始就在同一页面中。无论如何，您可能希望将它们放在单独的文件中，以便将来更容易维护并分离关注点。

您还可以使用普通的 javascript 来实现：

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.setAttribute('src','your_script.js');
head.appendChild(script);

如果您坚持这样做 - 尝试将其直接注入文档head而不是文档中，body看看是否有帮助。

更一般地说 - 似乎您正在构建一个单页应用程序（SPA） - 您是否研究过 JS 框架，如Angular、Backbone等？他们将为您处理所有繁重的工作，并帮助您更好地扩展应用程序。这听起来有点像试图重新发明轮子，作为一个教育过程可能是一件很棒的事情，但从长远来看可能不是一个好主意。

希望这可以帮助。