From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../createhtmldocument/index.html | 163 +++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 files/fr/web/api/domimplementation/createhtmldocument/index.html (limited to 'files/fr/web/api/domimplementation/createhtmldocument/index.html') diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.html b/files/fr/web/api/domimplementation/createhtmldocument/index.html new file mode 100644 index 0000000000..a7ea4e54fc --- /dev/null +++ b/files/fr/web/api/domimplementation/createhtmldocument/index.html @@ -0,0 +1,163 @@ +--- +title: DOMImplementation.createHTMLDocument() +slug: Web/API/DOMImplementation/createHTMLDocument +tags: + - API + - DOM + - DOM Référence(2) + - DOM implémentation + - Expérimental(2) + - Méthode + - Référence(2) +translation_of: Web/API/DOMImplementation/createHTMLDocument +--- +

{{ApiRef("DOM")}}{{SeeCompatTable}}

+ +

La méthode DOMImplementation.createHTMLDocument()  crée un nouveau {{domxref("Document")}} HTML.

+ +

Syntaxe

+ +
newDoc = document.implementation.createHTMLDocument(titre);
+ +

Paramètres

+ +
+
title  {{optional_inline}}  (excepté dans IE)
+
C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML.
+
+ +

Exemple

+ +

Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant.

+ +

Ci-dessous, le code HTML pour cet exemple:

+ +
<body>
+  <p>Cliquez <a href="javascript:makeDocument()">ici</a> pour créer un nouveau document et l'insérer au dessous.</p>
+  <iframe id="laFrame" src="about:blank" />
+</body>
+
+ +

L'implémentation en JavaScript de la méthode makeDocument():

+ +
function makeDocument() {
+  var frame = document.getElementById("laFrame");
+
+  var doc = document.implementation.createHTMLDocument("Nouveau Document");
+  var p = doc.createElement("p");
+  p.innerHTML = "Ceci est un nouveau paragraphe.";
+
+  try {
+    doc.body.appendChild(p);
+  } catch(e) {
+    console.log(e);
+  }
+
+  // Copie le nouveau document HTML dans la frame
+
+  var destDocument = frame.contentDocument;
+  var srcNode = doc.documentElement;
+  var newNode = destDocument.importNode(srcNode, true);
+
+  destDocument.replaceChild(newNode, destDocument.documentElement);
+}
+
+ +

Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode createHTMLDocument() pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document.

+ +

La ligne 16 récupère le contentDocument (contenu du document) du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document.

+ +

Voir l'exemple sur une page

+ +

Le document retourné est préconstruit avec le code HTML suivant :

+ +
<!doctype html>
+<html>
+<head>
+<title>titre</title>
+</head>
+<body>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}{{Spec2('DOM WHATWG')}}Première définition.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}} [1]9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ +

[1] Le paramètre title a seulement été créé dans Firefox 23.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf