Dokumente überblenden

[Camping_RIDER]

Aloha ;)

So in der Art (ungetestet):

<script>
var myStylesheetURL = 'http://example.net/mystylesheet.css';

if (localStorage) // wenn localStorage vom Browser unterstützt wird
{
  if (localStorage.getItem('myStylesheet') // wenn myStylesheet schon im localStorage ist
  {
    // schreibe myStylesheet aus dem localStorage in ein style-Element
    createStyleElement(localStorage.getItem('myStylesheet'));
  }

  else // wenn myStylesheet noch nicht im localStorage ist
  {
    // hole http://example.net/mystylesheet.css per AJAX
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', myStylesheetURL);

    httpRequest.onreadystatechange = function ()
    {
      if (httpRequest.readyState === XMLHttpRequest.DONE)
      {
        if (httpRequest.status === 200)
        {
          // schreibe myStylesheet in localStorage
          localStorage.setItem('myStylesheet', httpRequest.responseText);

          // schreibe myStylesheet in ein style-Element
          createStyleElement(httpRequest.responseText);
        }
        else
        {
          createLinkElement();
        }
      }
    };

    httpRequest.send();
  }
}

else // wenn localStorage vom Browser nicht unterstützt wird
{
  createLinkElement();
}

function createStyleElement(stylesheet)
{
  var styleElement = document.createElement('style');
  styleElement.innerText = stylesheet;
  document.head.appendChild(styleElement);
}

function createLinkElement()
{
  var linkElement = document.createElement('link');
  linkElement.rel = 'stylesheet';
  linkElement.href = myStylesheetURL;
  document.head.appendChild(linkElement);
}
</script>
<noscript>
  <link rel="stylesheet" href="http://example.net/mystylesheet.css"/>
</noscript>

Und in dem Moment in dem sich das Stylesheet serverseitig ändert schaut ein User mit LocalStorage in die Röhre - oder braucht doch wieder ständig aufs neue HTTP-Requests?

<?php if (isset($_COOKIE['myStylesheet'])): ?>
  <link rel="stylesheet" href="http://example.net/mystylesheet.css"/>
<?php else: ?>
  <style>
    <?php readfile('mystylesheet.css'); ?>
  </style>
  <script>
    window.onload = function ()
    {
    // hole http://example.net/mystylesheet.css per AJAX
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', 'http://example.net/mystylesheet.css');

    httpRequest.onreadystatechange = function ()
    {
      if (httpRequest.readyState === XMLHttpRequest.DONE)
      {
        if (httpRequest.status === 200)
        {
          // setze Cookie
          document.cookie = 'myStylesheet=true';
        }
      }
    };

    httpRequest.send();
  }
  </script>
<?php endif; ?>

Gut, die Lösung verstehe ich (und halte ich für sinnvoll), da hier normales Caching-Verhalten ausgenutzt wird.

Grüße,

RIDER