HTML in Daten konvertieren: Text / HTML-Link mit JavaScript

Hier ist mein HTML:

<a>View it in your browser</a>
<div id="html">
    <h1>Doggies</h1>
    <p style="color:blue;">Kitties</p>
</div>

Wie verwende ich JavaScript, um die href - Attribut des link auf eine base64-codierte Webseite, deren Quelle ist die innerHTML von div#html?

Ich wollen im Grunde das gleiche zu tun, Konvertierung hier (mit dem base64 checkbox aktiviert), außer für in JavaScript.

InformationsquelleAutor der Frage Web_Designer | 2012-02-11

  1. 33

    Eigenschaften eines data-URI

    Einen data-URI MIME-Typ text/html werden in einem der folgenden Formate:

    data:text/html,<HTML HERE>
data:text/html;charset=UTF-8,<HTML HERE>

    Base-64-Codierung ist nicht notwendig. Wenn der code enthält nicht-ASCII-Zeichen, wie éécharset=UTF-8 Hinzugefügt werden.

    Folgende Zeichen müssen maskiert werden:

    • # - Firefox und Opera interpretieren dieses Zeichen als marker für den hash (wie in location.hash).
    • % - Dieses Zeichen wird verwendet, um escape-Zeichen. Entfliehen Sie dieses Zeichen, um sicherzustellen, dass keine Nebenwirkungen auftreten.

    Darüber hinaus, wenn Sie möchten, Betten Sie den code in ein Anker-tag, die folgenden Zeichen sollten auch escaped werden:

    • " and/or ' - Zitate markieren Sie den Wert des Attributs.
    • & - Das kaufmännische und-Zeichen wird verwendet, um HTML-entities.
    • < und > tun nicht entgangen sein innerhalb einer HTML-Attribut. Allerdings, wenn Sie gehen, um das einbetten der link in der HTML, auch diese sollten escaped werden (%3C and %3E)

    JavaScript-Implementierung

    Wenn Sie nichts dagegen haben, die Größe der Daten-URI, die einfachste Methode, dies zu tun ist mit alsterrunde:

    var html = document.getElementById("html").innerHTML;
var dataURI = 'data:text/html,' + encodeURIComponent(html);

    Wenn die Größe ankommt, solltest du besser entfernen Sie alle aufeinander folgender Leerzeichen (dies kann sicher durchgeführt werden, es sei denn, die HTML enthält ein <pre> element/Stil). Dann, nur ersetzen Sie die deutlichen Zeichen:

    var html = document.getElementById("html").innerHTML;
html = html.replace(/\s{2,}/g, '')   //<-- Replace all consecutive spaces, 2+
           .replace(/%/g, '%25')     //<-- Escape %
           .replace(/&/g, '%26')     //<-- Escape &
           .replace(/#/g, '%23')     //<-- Escape #
           .replace(/"/g, '%22')     //<-- Escape "
           .replace(/'/g, '%27');    //<-- Escape ' (to be 100% safe)
var dataURI = 'data:text/html;charset=UTF-8,' + html;

    InformationsquelleAutor der Antwort Rob W

Schreibe einen Kommentar