如何使用jQuery同步加载页面
[英]How to load page synchronously using jQuery
问题描述
Currently I am using jQuery to choose what my index page should load depending whether a cookie is set. 
目前我正在使用jQuery来选择我的索引页面应该加载什么，这取决于是否设置了cookie。
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. 例如，如果设置了cookie，则index.html的body标签应加载hasCookie.html，如果未设置cookie，则加载noCookieSet.html。
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. 用户脚本具有检查cookie是否已设置的代码。 If it is, I use jQuery's load to load the content into the body: 如果是，我使用jQuery的加载将内容加载到正文中：
$(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. 但是，由于这是异步执行的，因此在更新body标记之前已加载样式脚本，因此未对样式进行样式设置。
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 编辑：如果它有帮助，样式脚本基本上是jQueryUI
6 个解决方案
解决方案1
9 2011-03-19 18:59:22
AFAIK, JQuery load cannot be synchronous. AFAIK，JQuery加载不能同步。
You can cet around this witha callback function. 你可以用回调函数来解决这个问题。
$(document.body).load('hasCookie.html', function(){
//call styling script here
});
解决方案2
2 已采纳 2011-03-19 18:57:10
In your case, this sounds like it would really be a better idea to implement server-side if possible. 在您的情况下，这听起来如果可能的话，实现服务器端真的是一个更好的主意。 In PHP it would be a simple matter of detecting if the cookie you want is set in the $_COOKIE array and outputting the correct page. 在PHP中，检测您想要的cookie是否设置在$ _COOKIE数组中并输出正确的页面是一件简单的事情。
解决方案3
1 2011-03-19 18:56:43
You can form it as an AJAX request and populate your page with the response. 您可以将其形成为AJAX请求，并使用响应填充页面。 Set the async option to false. 将async选项设置为false。 This SO answer has more: How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request? 这个答案有更多： 如何让jQuery执行同步而非异步的Ajax请求？
解决方案4
1 2011-03-19 18:57:44
Just change document.location.href to the url of the page. 只需将document.location.href更改为页面的url即可。
What you're doing is loading content with ajax and placing it within the page body. 你正在做的是用ajax加载内容并将其放在页面体内。 You'd do this if you didn't want any resources declared in head to get requested. 如果您不希望头部中声明的任何资源被请求，您可以这样做。 But there's no point in that since you can do it with caching. 但是没有意义，因为你可以通过缓存来实现。
解决方案5
0 2011-03-19 18:57:50
Try 尝试
$(document).ready(function() { $(document.body).load('hasCookie.html'); });
This will postpone loading until after everything else is already there. 这将推迟加载，直到其他所有内容都已存在。
解决方案6
0 2011-03-19 19:38:12
This is how i do it. 我就是这样做的。
You can attach Style and Javascript upon callback from the Ajax Function. 您可以在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);
});
This allows everything to be loaded including styles and javascript, given that the script name and css file name are the same. 这允许加载所有内容，包括样式和javascript，因为脚本名称和css文件名相同。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.