有时需要使用或不使用JavaScript 即时创建HTML文档 。 无论目标是显示确认页面还是包含整个页面的iframe,如果文档足够简单,则可以轻松地将其放在一起并与数据URL或JavaScript一起使用 。
但是,您如何处理呢? 我确定您已经知道如何使用JavaScript将HTML添加到文档中,但是如何创建整个HTML文档 ? 您可能会对我将在下面显示的某些方法感兴趣,其中第一种甚至不需要JavaScript!
我将在iframe中显示所有新创建的文档,以便您可以看到它们的呈现。 但是,您可以根据需要使用文档。 例如,它们可以保存到数据库中或通过Web服务发送以呈现在其他位置。
1.数据网址
数据URL为您提供了一种简单有效的方法来在网页上提供文档 。 如果您不熟悉它,请阅读我们之前关于它们如何工作的文章 。
基本上,数据URL 以data:
URL scheme开头 。 它后面是要提供的内容 ,在此之前,您可以选择提及媒体类型和内容的编码 。
您可能已经看过图像是通过这种方式提供的,其中base64字符作为媒体URL后的媒体类型给出。
<img src="https://img-blog.csdnimg.cn/2022010621394977966.png"
alt="man with a computer">
上面的代码显示了带有笔记本表情符号的人的PNG图像-您可以在浏览器中对其进行检查。
类似于此操作, 数据URL也可以提供HTML文档 :
<iframe src='data:text/html,<strong>Hello World!</strong>'></iframe>
iframe 呈现使用数据URL添加HTML文档 ,该数据URL包含text/html
媒体类型&和HTML代码。
如果您想了解该技术的工作原理,可以在下面添加额外HTML来编辑Codepen演示。
2. DOMImplementation界面
DOMImplementation
是一个界面,可以使用它的createDocument()
(对于XML)或createHTMLDocument()
方法(无论您需要什么createHTMLDocument()
来创建全新的文档 。 使用document.implementation
对象访问该接口。
您可以像平常一样将HTML添加到新创建的文档中 :使用诸如append()
, appendChild()
方法以及其他与DOM相关JavaScript方法 。
<iframe src=""></iframe>
window.onload = () => {
var doc = document.implementation.createHTMLDocument();
doc.body.append('Hello World!');
var iframeDoc = document.querySelector('iframe').contentDocument;
iframeDoc.replaceChild(
doc.documentElement,
iframeDoc.documentElement
);
}
在上面的代码中,使用DOMImplementation
接口和Hello World!
的createHTMLDocument()
方法创建了一个新HTML文档 。
将string 添加到其body元素中 。
然后,要查看新创建的文档在呈现时的外观,我使用replaceChild()
方法将iframe的document元素( iframeDoc.documentElement
)替换为新文档的doc.documentElement
元素。 这样,您就可以看到Hello World!
我们创建并添加到iframe中的文档中的字符串 。
3. DOMParser API
顾名思义, DOMParser
API 将HTML / XML字符串解析为DOM文档 。
可以使用其构造函数 DOMParser()
创建一个新的DOMParser
对象实例。 该实例拥有一个名为parseFromString()
的方法,该方法在接受两个参数后进行解析 :要解析的字符串和要创建的文档的文档类型。
<iframe src=""></iframe>
window.onload = () => {
var parser = new DOMParser();
var doc = parser.parseFromString('<strong>Hello World! </strong>', "text/html");
doc.body.append('extra text');
var iframeDoc = document.querySelector('iframe').contentDocument;
iframeDoc.replaceChild(doc.documentElement, iframeDoc.documentElement);
}
在上面的代码中,新的DOMParser
实例使用parseFromString()
方法将HTML字符串解析为DOM文档 。
然后,以与先前代码段相同的方式,新创建的文档的document元素替换iframe的document元素 。 结果,我们创建的文档中HTML代码在iframe中变得可见。
翻译自: https://www.hongkiat.com/blog/create-html-documents-on-the-fly/