javascript document.innerHTML de contenu d'ensemble de tout le document

Comment puis-je régler le innerHTML, ou l'ensemble du contenu d'un document HTML à l'aide de javascript?

Par exemple mon document devrait ressembler à ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-language" content="en"/>
    <title>Webpage Generator</title>
    <script type="text/javascript">
    var newDocument = "&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; \n\t&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Greetings!&lt;/title&gt;\n&lt;/head&gt;\n&lt;body&gt;\n\t&lt;p&gt;Howdy!&lt;/p&gt;\n&lt;/body&gt;\n&lt;/html&gt;";
    document.innerHTML = newDocument;
    </script>
</head>
<body>
</body>
</html>

Mais le navigateur de charger le code HTML suivant:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Greetings!</title>
</head>
<body>
    <p>Howdy!</p>
</body>
</html>
  • Quel problème essayez-vous de résoudre par l'instauration du document.innerHTML?
  • Pourquoi ne pas remplacer tout simplement le corps ?
  • Je veux remplacer l'ensemble du document. Y compris le doctype.
  • Je ne vois pas vraiment d'un point dans cette.
  • Je sais que c'est vraiment un serveur de type de travail, mais j'étais juste curieux de savoir dans quelle mesure il pouvait être fait en javascript.
InformationsquelleAutor Web_Designer | 2011-07-20
  1. 26

    Si vous ne souhaitez pas utiliser innerHTML vous pouvez utiliser document.write(newDocument);.

    Si le document n'a pas complètement chargée, vous aurez besoin de mettre document.open() (grâce bažmegakapa).

    • Cette juste ajoute newDocument sur le document en cours plutôt que de le remplacer.
    • Si vous exécutez cette commande une fois le document chargé, il sera question d'un document.open() appeler ainsi. Donc, fondamentalement, tout sera effacé. jsFiddle Démo
    • Comme je l'ai dit dans les commentaires sur ma réponse, il fonctionne de la façon dont vous le souhaitez, si vous le faites après le document est chargé (par exemple window.onload).
    • merci, bon point; mise à jour de réponse.
    InformationsquelleAutor wchargin
  2. 27

    document.innerHTML est nouveau en HTML5 et n'est pas pris en charge dans tous les navigateurs.

    document.documentElement se réfère à l'élément racine du document, qui dans ce cas est la <html> élément.

    Donc, vous pouvez définir document.documentElement.innerHTML. A noter que depuis le DOCTYPE est en dehors de cela, il n'ya donc pas besoin de l'inclure dans le innerHTML.

    Exemple (essayez d'exécuter cette dans votre navigateur JS console):

    document.documentElement.innerHTML = '<title>Test</title><p>LOLWAT';

    Mise à jour: document.innerHTML déplacé à partir de la spécification HTML pour le DOM d'Analyse et de Sérialisation spec, et plus tard est supprimé. L'alternative proposée est d'utiliser DOMParser:

    var doc = (new DOMParser).parseFromString('<!doctype html><title>wat</title>', 'text/html');

    Malheureusement, au moment de la rédaction, la plupart des navigateurs ne prennent pas en charge cette encore pour HTML.

    • Ceci peut être utile, mais est-il un moyen de remplacer non seulement la innerHTML de la <html> élément, mais l'ensemble du document, y compris le doctype?
    • Vous pouvez utiliser quelque chose comme window.onload = function() { document.write('lol'); }; qui ouvrirait sur l'ensemble du document. Ou vous pouvez utiliser une frame/iframe, ce qui semble être une meilleure solution que ce que vous faites maintenant.
    • voir ceci: jsfiddle.net/ghostoy/MqNyn
    • Bynens votre méthode à l'aide de window.onload est assez habile, car il définit le contenu du document avant qu'il a chargé, et donc il remplace le HTML d'origine avec le nouveau document, plutôt que d'ajouter le nouveau document sur la page html chargée. Merci +1!
    • En fait, il définit après le document est chargé, c'est pourquoi il remplace le HTML d'origine.
    InformationsquelleAutor Mathias Bynens
  3. 11

    Utiliser ce code (d'après document en cours a été chargé) :

    document.open("text/html", "replace");
document.write(htmlCode);  //htmlCode is the variable you called newDocument
document.close();

    Live exemple ici :
    http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open

    espérons que cette aide 😉

    • or, a travaillé comme un charme
    • Ouais, mais être prudent, car certains navigateurs (IE et Firefox), permet de considérer htmlCode comme la nouvelle page elle-même, donc, si vous frappez F5, le navigateur ne permet pas d'actualiser la page d'origine, mais ce htmlCode. Si vous voulez F5 encore de travail, voir ma réponse.
    InformationsquelleAutor fred727
  4. 3

    Simple:

    document.body.parentElement.innerHTML = '<html><body><div>Your code</div></body></html>';

    Noter qu'il ne sera pas interpréter le code js intégré dans votre code html.

    InformationsquelleAutor Matthieu Charbonnier