简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Verschlüsseln Sie HTML-Elemente, bevor der Browser versucht, sie darzustellen. Ist dies ein seltener gültiger Anwendungsfall für „document.write'?
P粉752290033
P粉752290033 2024-01-10 18:07:41
0
1
429

Ich habe einen Kopfbereich auf meiner Webseite, der von einigen Hintergrundbildern durchzogen wird.

Sie haben eine etwas hohe Auflösung und befinden sich über dem Falz, daher möchte ich nicht, dass der Browser andere Bilder als das erste lädt.

Aber ich möchte auch die Reihenfolge der Bilder zufällig festlegen.

Das Problem ist, dass ich einen statischen Webhost (Netlify) verwende.

Einige Ansätze, die ich in Betracht gezogen habe:

  • Fügen Sie die Elemente wie gewohnt in das Dokument ein und verwenden Sie dann Javascript, um sie abzufragen und ihre Reihenfolge zufällig festzulegen. Ich zögere, weil ich glaube, dass der Browser begonnen hat, das erste Bild zu laden, das im HTML-Code ankommt, und es dann zufällig an andere Speicherorte verschoben wird. Ich möchte diese Situation vermeiden.
  • Verwenden Sie einen Servercode zur Randomisierung. Aber ich möchte nicht; ich würde keinen Server nur für diese Funktionalität betreiben.
  • Schreiben Sie jede mögliche Kombination oder zumindest eine Handvoll davon als separate HTML-Datei und randomisieren Sie sie per URL-Umschreibung in einer Edge-Funktion. Es sieht etwas chaotisch aus. Ich möchte keine Edge-Funktionen verwenden, wenn dies nicht erforderlich ist, da es sich nur um eine weitere Quote handelt, um die ich mir Sorgen machen muss.
  • Schreiben Sie eine Logik in die Edge-Funktion, um die Seitenantwort abzufangen und zu ändern. Obwohl der Code selbst übersichtlicher ist, sind die bereitgestellten Dateien weniger übersichtlich. Verbunden mit der gleichen Abneigung gegen Running-Edge-Funktionen.

Ich möchte etwas JS-Code ausführen, eine kurze Logik ausführen und dem Stream etwas Markup hinzufügen, bevor der Browser die gesamte HTML-Antwort sieht. Ich kann dann in

Ich finde, genau das macht document.write, nicht wahr?

Alle Quellen sagen, man solle es vermeiden wie die Pest document.write. Aber ich frage mich, ob dies ein seltener gültiger Anwendungsfall ist? 

<html>
  <body>
    <p>This seems to work, and I kind of think it's not a terrible idea.</p>
    <script type="application/javascript">
      // Standard Fisher-Yates shuffle; not relevant
      function shuffle(array) { let i = array.length, j; while (i != 0) { j = Math.floor(Math.random() * i); i--; [array[i], array[j]] = [array[j], array[i]]; } return array; }

      const paras = [
        "<p>para 1</p>",
        "<p>para 2</p>",
        "<p>para 3</p>",
        "<p>para 4</p>",
      ];
      shuffle(paras);
      document.write(paras.join(""));
    </script>
    <noscript>
      <p>para 1</p>
      <p>para 2</p>
      <p>para 3</p>
      <p>para 4</p>
    </noscript>
    <p>Change my mind.</p>
  </body>
</html>

Ist das eine schlechte Idee? Warum? Gibt es einen besseren Weg, meinen Wunsch zu verwirklichen?

P粉752290033
P粉752290033

Antworte allen(1)
P粉349222772
P粉3492227722024-01-11 16:07:11 1 Etage

是的，这不是一个好主意。该方法非常古老，并且具有可能因浏览器而异的特定行为。请参阅 https://developer.mozilla.org/en- US/docs/Web/API/Document/write 了解更多信息。

只需使用现代方法，例如：

等等。随机排列元素，因为这些元素对于渲染器/浏览器来说是安全的。

不过，针对您的特定用例的建议是：浏览器需要首先加载 JavaScript 才能使其按照您想要的方式工作，但这可能不会发生。图像可能仍在按照它们最初在 HTML 源中的顺序加载。如果可能的话，我建议将此逻辑移至服务器。 最终，任何 Javascript 都可能不适用于您的用例。可能可以不在文档本身中包含图像，然后通过 JS 添加它们（在随机加载时），这将是我的首选方法。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！