我已经尝试过：

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 将用于将任何网址加载到div“content”中。但是，我还需要加载脚本以使页面正常工作。

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

0是Header html
1是Content html
2是动态添加的脚本

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

主线程上的同步XMLHttpRequest因不推荐使用它对最终用户的体验产生不利影响。如需更多帮助，检查https://xhr.spec.whatwg.org/。

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

我已经尝试过：

jQuery.getScript
- 此解决方案要求我将所有脚本移动到单独的JS文件中。这可能会解决它，但我宁愿将它们全部保存在相应的页面中。
AjaxPreFilter
- $ .ajaxPrefilter with options.async = true使脚本在页面后加载，从而使某些属性未定义且无法正常工作。

Answer 1

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

我建议使用$.getScript，因为这会正确加载脚本。我真的不明白为什么你希望所有的javascripts从一开始就在同一页面。您可能希望将它们放在单独的文件中，以便于在路上进行维护并分离关注点。

你也可以使用香草javascript：

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

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

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

希望这有帮助。

Answer 2

您现在正在做的事情不是最佳做法。如果您想使用Ajax加载页面并动态调用Js文件，我建议您使用pjax。

请看这里：https://github.com/defunkt/jquery-pjax

由于您使用的是laravel，因此您可以在pjax中轻松实现此功能。

这是一个教程：https://laracasts.com/lessons/faster-page-loads-with-pjax

异步加载/附加JS脚本

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

我已经尝试过：

jQuery.getScript

AjaxPreFilter

2 个答案: