Ich versuche, die Verwendung eines Daten-URI zu vermeiden, da das generierte Dokument nicht im Verlauf des Browsers gespeichert werden soll. Ist es möglich, das gesamte HTML-Dokument direkt zu ersetzen?Gesamtes HTML-Dokument ersetzen
Ich versuchte jQuery("html").html("<html>....</html>"), aber die style Informationen überleben nicht.
Sie wollen wahrscheinlich, dies zu tun:
jQuery("body").html("new content");
... wo "new content" würde im Idealfall nur das Markup enthalten, die normalerweise innerhalb des body Element und nicht den Rest erscheinen würde. Das wird den Inhalt des Körperelements ersetzen, während Sie alles, was Sie haben, in head (wie Stylesheet-Informationen) allein lassen. Wenn Sie auch den Titel aktualisieren möchten, können Sie, dass
über document.title = "new title"; bearbeite ich über das Ersetzen alles innerhalb des html Element zu fragen, bekam, ob das funktionieren würde, und was passieren würde. Also tat ich dies:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
font-weight: bold;
color: blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
$(document).ready(pageInit);
function pageInit() {
$('#btnChange').live('click', changePage);
$('#btnHiThere').live('click', sayHi);
}
function changePage() {
$('html').html(
"<head><\/head>" +
"<body>" +
"<input type='button' id='btnHiThere' value='Click for Alert'>" +
"<p>Note how this text now looks.<\/p>" +
"<\/body>"
);
}
function sayHi() {
alert("Hi there");
}
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>
und die Ergebnisse waren sehr interessant — ich mit einer DOM-Struktur am Ende, die keine an allenhead oder bodyhaben, nur html mit den Nachkommen von head und body Innerhalb. Dies ist wahrscheinlich, was das (neue) Styling in den neuen Inhalten vermasselt. Ich bekomme im Wesentlichen die gleiche Ergebniseinstellung innerHTML direkt (was vielleicht sein kann, warum es nicht in jQuery funktioniert; jQuery verwendet innerHTML, wenn es möglich ist, obwohl es sehr anspruchsvoll ist, es nicht zu tun, wenn es nicht möglich ist); während, wenn ich etwas Ähnliches mache, indem ich explizit die head und body Elemente über document.createElement und document.appendChild erstelle, funktioniert es.
All dies bedeutet fast sicher, dass dies mehr Aufwand als es wert ist. Aber
: Beachten Sie, dass der Wechsel Inhalt der head und body Elemente scheint ganz gut zu funktionieren:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
font-weight: bold;
color: blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
$(document).ready(pageInit);
function pageInit() {
$('#btnChange').live('click', changePage);
$('#btnHiThere').live('click', sayHi);
}
function changePage() {
$('head').html(
"<style type='text/css'>\n" +
"body { color: green; }\n" +
"<\/style>\n"
);
$('body').html(
"<input type='button' id='btnHiThere' value='Click for Alert'>" +
"<p>Note how this text now looks.<\/p>"
);
}
function sayHi() {
alert("Hi there");
}
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>
Also, wenn Sie die „Seite“ trennen Sie Laden in Kopf- und Körperteile Sie können es einfach an Ort und Stelle aktualisieren.
so ist es nicht möglich, ein neues
Tag zu laden? – james@james: Es * kann * möglich sein, aber wenn Sie das tun, müssen Sie sicherstellen, dass es alles darin hat, was Sie noch haben möchten (wie die Stylesheet-Referenzen). Sie müssen sich wahrscheinlich keine Gedanken über die Pflege von Skript-Tags machen. Sobald das Skript geladen und ausgewertet wurde, ist es nicht mehr an das Element gebunden, das es erstellt hat, und das Entfernen des Elements hat keine Auswirkungen auf das Skript. –
Ich bemerke (viel verspätet, ja), dass das Vorhandensein von schwerem JS im Kopf (zum Beispiel durch Optimizely oder Ensighten) sogar den Körper unhaltbar machen kann. –
Nein jquery:
var newString = [
"<!doctype html>"
, "<html>"
, "<head>"
, "</head>"
, "<body>"
, "<h1>new content</h1>"
, "</body>"
, "</html>"
].join("");
document.getElementById('myIframeId').contentDocument.documentElement.outerHTML = newString;
Ich bin durch Ihre Aussage verwirrt „Stilinformationen nicht überleben“, werden die Stile verknüpft werden, oder in dem Dokument enthalten sind, so dass, wenn Sie das gesamte Dokument ersetzen würden Sie Erwarten Sie, dass die Stile verloren gehen? Müssen Sie wirklich das/ganze/Dokument ersetzen? Was versuchen Sie aus Sicht der Besucher zu erreichen? –
sorry, ich meinte, dass die * new * style information, .html ("... ..."), nicht überlebt. – james
Ich wusste nicht, dass Sie über * neue * Stilinformationen sprechen. Dieser Kommentar hat mich gewundert; Ich habe meine Antwort ein wenig aktualisiert. –