如何检查< link rel =“样式表" href =“" file.css">成功了 [英] How to check if a <link rel="stylesheet" href="file.css"> succeeded

问题描述

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

到目前为止，我使用以下代码，但是在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 */

在寻找另一种方法时，我尝试检查link语句是否在更改其href后加载了新的CSS，例如:

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

但它不起作用.

感谢您的建议！

解决方案

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

您始终可以将基本样式表和自定义样式表包括在内:

<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属性来标识要禁用或启用的适当样式表.

更多阅读和示例:

• 替代CSS样式/主题
• 如何使用JavaScript动态更改级联样式表(CSS)

I'm adding theme setting to my js application. The application should work also off-line, so I have to check if the remote style file (like http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/jquery/jquery-ui.css) exists and is reachable, otherwise I set the href in <link rel="stylesheet"> to point to a local file.

Till now I used the following code, but with jQuery 2.1.3 it output on console a warning:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

elicited at line jquery-2.1.3.js:8556 Well, I could ignore the warning...

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 */

Searching for an alternative method, I tried to check if the link statement has loaded the new css after changing its href, something like:

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

but it does not works.

Thanks for suggesting!

解决方案

Why not using alternate style-sheets and groups?

You can always include the base stylesheet and custom one as an alternate one:

<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" />

In this case the custom.css is available and the browser will load him (only him) - In case its not available the browser will move to the first one (without the alternate) and will load him- e.g:

<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" />

Now the base.css is loaded because custom1111.css is not available.

Note that the the group is defined by the title attribute - you can set many groups too - e.g:

<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" />

Using JavaScript to switch style sheets:

You can disable a style-sheet by setting it to disabled = true use the title attribute to identify the proper style-sheet to disable or enable.

More reading and examples:

• Alternate CSS Styles / Themes
• How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

这篇关于如何检查< link rel =“样式表" href =“" file.css">成功了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！