使用 jquery 动态加载 JS 和 CSS

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 由于同源策略而无法加载。错误消息是“同源策略不允许读取位于http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css 的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决”

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

1. 在此代码中，jquery-ui.min.js 已加载，但 jquery-ui.css 未加载。由于同源策略，如果没有加载jquery-ui.css，如何加载jquery-ui.min.js？

2. 当我们在标题中包含 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。

注意，$.ajax() $.ajax() 对 "http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" 的请求似乎是 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