diff options
Diffstat (limited to 'files/zh-cn/web/api/domimplementation/createhtmldocument')
| -rw-r--r-- | files/zh-cn/web/api/domimplementation/createhtmldocument/index.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/domimplementation/createhtmldocument/index.html b/files/zh-cn/web/api/domimplementation/createhtmldocument/index.html new file mode 100644 index 0000000000..558f4bad6c --- /dev/null +++ b/files/zh-cn/web/api/domimplementation/createhtmldocument/index.html @@ -0,0 +1,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"><body> + <p>Click <a href="javascript:makeDocument()">here</a> to create a new document and insert it below.</p> + <iframe id="theFrame" src="about:blank" /> +</body> +</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"><!doctype html> +<html> +<head> +<title><em>title</em></title> +</head> +<body> +</body> +</html> +</pre> + +<p>译者注:</p> + +<pre>alert(document.implementation.createHTMLDocument("myTitle").documentElement.outerHTML) + +//<html><head><title>myTitle</title></head><body></body></html> +</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> |