如何使用 jQuery 同步加载页面

发布于 2024-10-23 19:05:43 字数 541 浏览 1 评论 0原文

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

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

我的索引页当前有：

load user scripts
load styling scripts

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

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

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

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

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

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

原文

Currently I am using jQuery to choose what my index page should load depending whether a cookie is set.

For example, the body tag of the index.html should load hasCookie.html if the cookie is set and noCookieSet.html if no cookie is set.

My index page currently has:

load user scripts
load styling scripts

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

The user script has the code that checks whether the cookie is set. If it is, I use jQuery's load to load the content into the body:

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

However, since this is executed asynchronously, the styling scripts have loaded before the body tag has been updated, hence the body is not styled.

Is there a way of having a synchronous load, or should am I approaching this in the wrong way?

EDIT: if it helps, the styling scripts are basically jQueryUI

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清旖 2024-10-30 19:05:43

AFAIK，JQuery 加载无法同步。

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

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

AFAIK, JQuery load cannot be synchronous.

You can cet around this witha callback function.

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

回复收藏 0 原文

瞎闹 2024-10-30 19:05:43

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

回复收藏 0 原文

裸钻 2024-10-30 19:05:43

您可以将其形成为 AJAX 请求并使用响应填充您的页面。将异步选项设置为 false。这个答案有更多：如何让 jQuery 执行同步而不是异步 Ajax 请求？

回复收藏 0 原文

多孤肩上扛 2024-10-30 19:05:43

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

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

回复收藏 0 原文

感情旳空白 2024-10-30 19:05:43

尝试

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

此操作将推迟加载，直到其他所有内容都已存在之后。

Try

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

This will postpone loading until after everything else is already there.

回复收藏 0 原文

等待圉鍢 2024-10-30 19:05:43

我就是这样做的。

您可以在 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 文件名相同。

This is how i do it.

You can attach Style and Javascript upon callback from the Ajax Function.

  $.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);      


});

This allows everything to be loaded including styles and javascript, given that the script name and css file name are the same.

回复收藏 0 原文

~没有更多了~