files/zh-cn/web/api/domimplementation/createhtmldocument/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

---
title: DOMImplementation.createHTMLDocument
slug: Web/API/DOMImplementation/createHTMLDocument
translation_of: Web/API/DOMImplementation/createHTMLDocument
---
<p>{{ApiRef("DOM")}}{{SeeCompatTable}}</p>

<h3 id="概述">概述</h3>

<p>该方法 (属于<a class="internal" href="/zh-cn/DOM/document.implementation" title="zh-cn/DOM/Document.implementation"><code>document.implementation</code></a>) 用来创建一个新的HTML文档.</p>

<h3 id="语法">语法</h3>

<pre>var doc = document.implementation.createHTMLDocument(title);
</pre>

<ul>
 <li><code>doc</code> 是新建的HTML文档.</li>
 <li><code>title</code> 是doc中的title标签中的文本.</li>
</ul>

<h3 id="例子">例子</h3>

<p>下面的例子演示如何创建了一个新的HTML文档,并把它插入到当前文档的一个{{ HTMLElement("iframe") }}中.</p>

<p><a href="/samples/domref/createHTMLDocument.html">查看在线演示</a></p>

<p>例子中的HTML代码如下:</p>

<pre class="brush: html">&lt;body&gt;
  &lt;p&gt;Click &lt;a href="javascript:makeDocument()"&gt;here&lt;/a&gt; to create a new document and insert it below.&lt;/p&gt;
  &lt;iframe id="theFrame" src="about:blank" /&gt;
&lt;/body&gt;
</pre>

<p>例子中用JavaScript实现的<code>makeDocument()</code>方法如下:</p>

<pre class="brush: js">function makeDocument() {
  var frame = document.getElementById("theFrame");

  var doc = document.implementation.createHTMLDocument("New Document");
  var p = doc.createElement("p");
  p.innerHTML = "This is a new paragraph.";

  try {
    doc.body.appendChild(p);
  } catch(e) {
    console.log(e);
  }

  // 将新建的HTML文档放到iframe中.

  var destDocument = frame.contentDocument;
  var srcNode = doc.documentElement;
  var newNode = destDocument.importNode(srcNode, true);

  destDocument.replaceChild(newNode, destDocument.documentElement);
}
</pre>

<p>代码 4-12 行创建了一个新的HTML文档,并在里面插入一些内容. 第4行 <code>createHTMLDocument()</code>构造了一个标题为"New Document"的HTML文档. 5-6行创建了一个段落元素并在里面插入了一些内容, 8-12行将新建的段落元素插入到HTML文档中.</p>

<p>16行获取了iframe的<code>contentDocument</code> 属性.这是我们将要插入新建的HTML文档的地方. 下面的两行将新建的HTML文档插入到了iframe的根元素中.这样,我们用20行代码实现了用一个新建的HTML文档替换iframe中原有文档的目的.</p>

<h3 id="备注">备注</h3>

<p>新生成的HTML文档有如下的初始结构:</p>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;<em>title</em>&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>译者注:</p>

<pre>alert(document.implementation.createHTMLDocument("myTitle").documentElement.outerHTML)

//&lt;html&gt;&lt;head&gt;&lt;title&gt;myTitle&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 id="规范">规范</h3>

<ul>
 <li><a class="external" href="http://www.whatwg.org/html/#dom-domhtmlimplementation-createhtmldocument" title="http://www.whatwg.org/html/#dom-domhtmlimplementation-createhtmldocument"><code>createHTMLDocument</code> specification</a></li>
</ul>

<p>{{ languages( { "en": "en/DOM/DOMImplementation.createHTMLDocument" } ) }}</p>