javascript 如何使用jQuery同步加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5364166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load page synchronously using jQuery
提问by Karan
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. If it is, I use jQuery's load to load the content into the body:
用户脚本具有检查是否设置了 cookie 的代码。如果是，我使用 jQuery 的 load 将内容加载到正文中：
$(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 标签更新之前已经加载，因此 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
采纳答案by ctcherry
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 数组中并输出正确的页面是一件简单的事情。
回答by Peter Olson
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
});
回答by Vasil
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. 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.
您正在做的是使用 ajax 加载内容并将其放置在页面正文中。如果您不希望请求在 head 中声明的任何资源，则可以执行此操作。但这没有意义，因为您可以通过缓存来做到这一点。
回答by jn_pdx
You can form it as an AJAX request and populate your page with the response. Set the async option to false. This SO answer has more: How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
您可以将其形成为 AJAX 请求并使用响应填充您的页面。将异步选项设置为 false。这个 SO 答案有更多：如何让 jQuery 执行同步而不是异步的 Ajax 请求？
回答by Jacob
Try
尝试
$(document).ready(function() { $(document.body).load('hasCookie.html'); });
This will postpone loading until after everything else is already there.
这将推迟加载，直到其他一切都已经存在。
回答by Bodman
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.
鉴于脚本名称和 css 文件名相同，这允许加载所有内容，包括样式和 javascript。
