Use local css file if link to online css file is dead

前端未结

关注

 3  442

一个人的身影

The problem:

I am using w3.css(if you enter now w3schools.com site is down for maintenance) for styling my website.The problem

相关标签:

3条回答

梦谈多话

2021-01-23 09:44

Its possible with PHP. I haven't tested it but it should work.

Put this inside your <head> tag.

<?php

if (isDomainAvailible('http://www.w3schools.com')){
    echo '<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">';
} else {
    echo '<link rel="stylesheet" href="../css/w3.css">';
}

//returns true, if domain is availible, false if not
   function isDomainAvailible($domain)
   {
           //check, if a valid url is provided
           if(!filter_var($domain, FILTER_VALIDATE_URL))
           {
                   return false;
           }

           //initialize curl
           $curlInit = curl_init($domain);
           curl_setopt($curlInit,CURLOPT_CONNECTTIMEOUT,10);
           curl_setopt($curlInit,CURLOPT_HEADER,true);
           curl_setopt($curlInit,CURLOPT_NOBODY,true);
           curl_setopt($curlInit,CURLOPT_RETURNTRANSFER,true);

           //get answer
           $response = curl_exec($curlInit);

           curl_close($curlInit);

           if ($response) return true;

           return false;
   }

?>

Reference: https://css-tricks.com/snippets/php/check-if-website-is-available/

0 讨论(0)

孤街浪徒

2021-01-23 09:52

for check if w3.css is working you can use something like this. instead of src put w3.css image of logo or something .

function checkImage (src, up, down) {
    var img = new Image();
    img.onload = up; 
    img.onerror = down;
    img. src = src;
}

checkImage( "https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", function(){ alert("up"); }, function(){ alert("down"); } );

0 讨论(0)

小蘑菇

2021-01-23 10:04
Why not use JS like this?
```
<script type="text/javascript">
$.each(document.styleSheets, function(i,sheet){
  if(sheet.href=='http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css') {
    var rules = sheet.rules ? sheet.rules : sheet.cssRules;
    if (rules.length == 0) {
      $('<link rel="stylesheet" type="text/css" href="path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
    }
 }
})
</script>
```
$.each(document.styleSheets) iterates through the styleSheets of the document. Check out https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets for more info.

Then we specifically check if http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css is accessible. We use the ternary operator var rules = sheet.ruless ? sheet.rules : sheet.cssRules; The ternary operator works similar to an if statement, rules becomes sheet.rules if sheet.rules evaluates to true. If it is false it will become sheet.cssRules.

Lastly we check if there's anything in rules. If there isn't, we fallback to our local stylesheet solution and add it to the <head></head> of the document.

Although you may run into issues when using a very slow to load CDN. Alternatively you could use the onerror event
0 讨论(0)
发布评论:

提交评论
- 加载中...