Dokumente überblenden

[Gunnar Bittersmann]

@@TS

Hat Rolf b dich inzwischen gläubig gemacht?

Er hat mir eine Interpretation deiner einen Aussage (Local Storage) gegeben, die man nachverfolgen kann. Aber so ganz sicher, wie Du as wohl gemeint haben könntest, erschien er mir auch nicht.

Wie das in der Praxis dann aussieht, ist mir trotzdem noch schleierhaft. Wenn ich z. B. ein generelles Stylesheet (das für alle Dokumente der Site gelten soll) im Local Storage halten will, wie würde das aussehen müssen, damit man auch einen Fallback hat?

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 was ein Cookie hier zu suchen hat, hast Du leider auch nicht näher ausgeführt.

Nicht „hier“, sondern das ist eine gänzlich andere Art der Implementierung.

Soll da ggf. auch ein Stylesheet reinpassen?

Nein. Der (das?) Cookie muss nur ein Flag sein, das clientseitig gesetzt wird und serverseitig ausgewertet wird (ebenfalls ungetestet):

<?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; ?>

LLAP 🖖