Question

考虑以下代码，我只在需要弹出窗口时尝试加载jquery-ui。当用户点击链接

时，将调用此代码

 $.when( $.ajax({url: "http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css",  dataType: "html", cache: true}), 
    $.ajax({url: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js", dataType: "script", cache: true}),
    $.ajax({url: "../../plugins/jquery.dialogextend.js", dataType: "html", cache: true}) )
    .then( 
    function() { ...code for dialog goes here

此代码失败，因为jquery-ui.css将因同一原始策略而无法加载。错误信息是＆＃34;同源策略禁止在http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css读取远程资源。这可以通过将资源移动到同一域或启用CORS＆＃34;

来解决

现在我很困惑，并试图找到以下两个问题的答案

在此代码中，加载了jquery-ui.min.js但未加载jquery-ui.css。由于原始策略相同，如果未加载jquery-ui.css，如何加载jquery-ui.min.js？
当我们在头部包含jquery-ui.css时，<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" 它会加载。为什么同源政策不适用于此

请帮助我理解这一点。

Answer 1

修改，更新

请参阅Same-origin policy

以下是可能嵌入的资源的一些示例   跨来源：



使用<script src="..."></script>的JavaScript。语法错误的错误消息仅适用于同源脚本。



带<link rel="stylesheet" href="...">的CSS。由于CSS的宽松语法规则，跨源CSS需要正确的Content-Type   头。限制因浏览器而异：IE，Firefox，Chrome，Safari   （向下滚动到CVE-2010-0051）和Opera。

注意，dataType $.ajax() "http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"的{{1}}请求似乎是html？

尝试

$.when( $("head").append("<link rel=stylesheet href=http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css />")
  , $.ajax({url: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js", dataType: "script", cache: true})
  , $.ajax({url: "../../plugins/jquery.dialogextend.js", dataType: "html", cache: true}) )
    .then( 
    function() { ...code for dialog goes here

使用jquery动态加载JS和CSS

1 个答案: