Question

我将主题设置添加到我的js应用程序中。应用程序也应该脱机工作，所以我必须检查远程样式文件（如http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/jquery/jquery-ui.css）是否存在且是否可访问，否则我将href中的<link rel="stylesheet">设置为指向本地文件。

直到现在我使用了以下代码，但是使用jQuery 2.1.3，它会在控制台上输出警告：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看http://xhr.spec.whatwg.org/。

在jquery-2.1.3.js:8556行引出嗯，我可以忽略警告......

url = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/jquery/jquery-ui.css";

$.ajax({url: url,
    type: "HEAD",
    timeout: 1000,
    async: false,
    error: function() {url = 'css/jquery-ui.css';}
});
/* modify link statement to use url for href */

在搜索替代方法时，我尝试检查链接语句是否在更改其href后加载了新的css，如：

$('#id_of_the_link_stmt').error(function() {
  console.log("New url not loaded, reverting to local file")
}).attr('href', url);

但它不起作用。

感谢您的建议！

Answer 1

为什么不使用备用样式表和组？

您始终可以将基本样式表和自定义样式表作为备用样式表包括在内：

<link rel="stylesheet" type="text/css" href="css/base.css" title="base" />
<link rel="alternate stylesheet" type="text/css" href="css/custom.css" title="base" />

在这种情况下，custom.css可用，浏览器将加载他（只有他） - 如果它不可用，浏览器将移动到第一个（没有备用）并将加载他 - 例如：

<link rel="stylesheet" type="text/css" href="css/base.css" title="base" />
<link rel="alternate stylesheet" type="text/css" href="css/custom11111.css" title="base" />

现在加载了base.css，因为custom1111.css不可用。

请注意，该组由title属性定义 - 您也可以设置多个组 - 例如：

<link rel="stylesheet" type="text/css" href="css/main.css" title="base" />
<link rel="alternate stylesheet" type="text/css" href="css/main_custom.css" title="base" />

<link rel="stylesheet" type="text/css" href="css/nav.css" title="nav" />
<link rel="alternate stylesheet" type="text/css" href="css/nav_custom.css" title="nav" />

使用JavaScript切换样式表：

您可以通过将样式表设置为disabled = true来禁用样式表，使用title属性来标识要禁用或启用的正确样式表。

更多阅读和示例：

Answer 2

所以可行的解决方案是放入index.html：

<link rel="stylesheet" href="css/jquery-ui.css" title="theme"/>
<link rel="alternate stylesheet" id="ui-theme" title="theme"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/dark-hive/jquery-ui.css"/>

在主题更改代码中：

url = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/"+theme_name+"/jquery-ui.css";
$('#ui-theme').attr('href', url);

因此，如果用户处于离线状态，则jquery-ui.css的本地副本会启动，并且她不会面对无样式的jQuery UI屏幕。

如何检查<link rel =“stylesheet”href =“file.css”/>是否成功

2 个答案: