如何使用 jQuery 同步加载页面答案

【问题标题】：How to load page synchronously using jQuery如何使用 jQuery 同步加载页面
【发布时间】：2011-03-19 18:54:22
【问题描述】：

目前我正在使用 jQuery 来选择我的索引页面应该加载的内容，具体取决于是否设置了 cookie。

例如，如果设置了 cookie，则 index.html 的 body 标记应加载 hasCookie.html，如果未设置 cookie，则应加载 noCookieSet.html。

我的索引页目前有：

load user scripts
load styling scripts

<html><body></body></html>

用户脚本具有检查 cookie 是否设置的代码。如果是，我使用jQuery的load将内容加载到body中：

$(document.body).load('hasCookie.html')

但是，由于这是异步执行的，样式脚本在 body 标签更新之前已经加载，因此 body 没有样式。

有没有办法进行同步加载，还是我应该以错误的方式处理这个问题？

编辑：如果有帮助，样式脚本基本上是 jQueryUI

【问题讨论】：

这里最好的答案是不要 -- 而是使用.load() 的回调来执行你的样式函数...

标签： javascript jquery html load

【解决方案1】：

AFAIK，JQuery 加载不能同步。

你可以用回调函数来解决这个问题。

$(document.body).load('hasCookie.html', function(){
//call styling script here
});

【讨论】：

【解决方案2】：

在您的情况下，如果可能的话，这听起来确实是一个更好的主意。在 PHP 中，检测您想要的 cookie 是否设置在 $_COOKIE 数组中并输出正确的页面是一件简单的事情。

【讨论】：

【解决方案3】：

您可以将其形成为 AJAX 请求并使用响应填充您的页面。将异步选项设置为 false。这个 SO 答案有更多：How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

【讨论】：

【解决方案4】：

只需将 document.location.href 更改为页面的 url。

您正在做的是使用 ajax 加载内容并将其放置在页面正文中。如果您不希望在 head 中声明的任何资源被请求，您会这样做。但这没有任何意义，因为您可以通过缓存来做到这一点。

【讨论】：

【解决方案5】：

试试

$(document).ready(function() { $(document.body).load('hasCookie.html'); });

这将推迟加载，直到其他所有内容都已存在。

【讨论】：

【解决方案6】：

我就是这样做的。

您可以在从 Ajax 函数回调时附加样式和 Javascript。

  $.ajax({
    url: somePage,
    success:function(ajaxData){

                        //ATTACH AND RUN CORRESPONDING PAGE SCRIPT
                        var script = somePage + '.js';
                        $.getScript(script);



                        //ATTACH CORRESPONDING STYLE SHEET
                        var style = document.createElement('link');
                        style.type = 'text/css';
                        style.href = '/css/'+somePage+'.css';
                        style.rel = 'stylesheet';
                        style.media = 'screen';

                        document.getElementsByTagName('head')[0].appendChild(style);

                       //ADD HTML RETURNED
                       $('body').html(ajaxData);      


});

这允许加载所有内容，包括样式和 javascript，前提是脚本名称和 css 文件名相同。

【讨论】：