Einschließlich des Renderings eines HTML-Dokuments in ein anderes HTML-Dokument

Question

Einschließlich des Renderings eines HTML-Dokuments in ein anderes HTML-Dokument

Gefragt el 15 de April, 2009: Wann wurde die Frage gestellt
3600 Ansichten: Anzahl der Besuche der Frage
1 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe eine Zeichenfolge, die ein eigenständiges (und gültiges XHTML 1.0 Strict) HTML-Dokument darstellt, etwa so

var html = "<?xml ... <!DOCTYPE ... <html><head><style>...</style></head>
                  <body><table>...</table></body></html>";

Der Body dieses HTML-Dokuments enthält eine Tabelle, deren CSS-Stil im Kopf des HTML-Dokuments beschrieben ist.

Ich habe auch einen DOM-Baum eines anderen HTML-Dokuments. Wie kann ich in diesen DOM-Baum den DOM-Baum der Tabelle mit dem richtigen Stil (wie in der HTML-Zeichenfolge beschrieben) einfügen?

Ich bin besonders an einer jQuery-basierten Lösung interessiert.

EDIT : Um konkreter zu werden, ein Beispiel für eine HTML-Zeichenkette, von der ich spreche ist eingebettet in dieses XML-Dokument .

Gefragt el 15 de April, 2009 von Kaarel

Answer 1

1 Antworten

Answer 2

0voto

inxilpro Punkte 18839

Hier ist ein Testcode, der zeigt, wie ich das machen würde. Der Code extrahiert die <style> Element aus dem übergebenen HTML und fügt allen Selektoren eine benutzerdefinierte ID hinzu, dann injiziert es das HTML in eine <div> mit dieser ID. Auf diese Weise werden alle CSS, die von der HTML übergeben werden, nur auf die injizierte Tabelle angewendet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var html = '<?xml version="1.0" encoding="UTF-8"?>\n\
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n\
    <html xmlns="http://www.w3.org/1999/xhtml">\n\
    <head>\n\
    <title></title>\n\
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>\n\
    <style type="text/css">\n\
    div.dom { background-color: #ace; margin-bottom: 0.5em } table.drs { font-family: monospace; padding: 0.4em 0.4em 0.4em 0.4em; border: 1px solid black; margin-bottom: 2em; background-color: #eee; border-collapse: collapse }\n\
    td { vertical-align: top; padding: 0.3em 0.3em 0.3em 0.3em; border: 1px solid black }\n\
    td.op { vertical-align: middle; font-size: 110%; border: none }\n\
    </style>\n\
    </head>\n\
    <body><table class="drs"><tr><td><div class="dom">[]</div></td></tr></table></body>\n\
    </html>';

    var style = html.match(/<style([^>]*)>([^<]*)<\/style>/);
    var modifiedStyle = style[2].replace(/\s*(} |^|\n)\s*([^{]+)/g, " $1 #inserthere $2");

    $(document).find('head').prepend("<style" + style[1] + ">" + modifiedStyle + "</style");
    $("#inserthere").append($(html).children());
    });
</script>
</head>
<body>
<div id="inserthere">
</div>
</body>
</html>

Natürlich müssen Sie dies an Ihre Situation anpassen, aber es ist ein guter Ausgangspunkt.

Beantwortet el 23 de April, 2009 von inxilpro (18839 Punkte )

Einschließlich des Renderings eines HTML-Dokuments in ein anderes HTML-Dokument

Antwort

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Einschließlich des Renderings eines HTML-Dokuments in ein anderes HTML-Dokument

Antwort

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: