Question

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

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

我的索引页面目前有：

load user scripts
load styling scripts

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

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

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

但是，由于这是异步执行的，因此在更新body标签之前已加载样式脚本，因此未对样式体进行样式设置。

是否有同步加载的方法，或者我应该以错误的方式接近它？

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

Answer 1

AFAIK，JQuery加载不能同步。

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

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

Answer 2

在您的情况下，如果可能的话，这听起来真的是更好的实现服务器端。在PHP中，检测所需的cookie是否设置在$ _COOKIE数组中并输出正确的页面是一件简单的事情。

Answer 3

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

Answer 4

只需将document.location.href更改为页面的网址即可。

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

Answer 5

尝试

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

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

Answer 6

我就是这样做的。

您可以在Ajax函数回调时附加Style和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文件名相同。

如何使用jQuery同步加载页面

6 个答案: