重庆手机网站制作费用/竞价网

有时我们需要即时动态的创建 HTML 文档，无论是目标页，还是显示确定的页面，或者是包含整个页面的 iframe，如果文档足够简单，则可以轻松地将其放在一起并与 data URL 或 JavaScript 配合使用。

你肯定已经知道如何用 JavaScript 将 HTML 添加到文档中，但是要想创建一个完整的 HTML 文档该怎么做呢？下面提供了三种方法，甚至不需要 JavaScript。

我将在 iframes 中渲染新创建的文档，以便你可以看到它们的渲染结果。你可以直接使用这些文件，也可以把它们保存到数据库或不同的 Web 服务服务器中在其他地方渲染。

1. Data URL

Data URLs为在网页上添加文档提供了一个简单有效的方法。

Data URL 以 开始，后面是“URL方案”，也就是要提供的内容，同时你可以设置文件类型和内容的编码。

你可以看到下面这种方式的图像，其中 base64 编码形式的字符串作为内容给出。

上面的代码显示下面这张 PNG 图片。

Base64 图片

同样，data URL也可以支持 HTML 文档：

能够渲染以 媒体类型及 HTML 代码为内容的 data URL。

完整代码：

2. Domimplingation接口

是一个界面，可以用它的 (用于XML)或 方法来创建新的文档。通过 对象可以访问该接口。

方法有一个用来设置新文档标题的可选参数。

可以通过 、 等方法将 HTML 添加到新创建的文档：

在上面的代码中，用 接口的   方法创建新的HTML文档，并把字符串 添加到其 元素中。

然后就是渲染新创建的文档，代码中用了   替换了 iframe()的文档元素。这样就能看到我们添加文档中的字符串 了 。

3. DOMParser API

顾名思义， api 用于将 HTML或XML字符串解析为 DOM。

可以用它的构造函数 创建新的 对象实例。实例包含一个名为    的方法，它又两个参数：要解析的字符串以及要创建的文档类型。

在上面的代码中，使用  方法创建了新的 实例，用于将 HTML 字符串解析为 DOM 文档。

然后用和上一个代码段相同的方式，新创建的文档元素换了 iframe 的文档元素。因此我们创建的文档中的 HTML 代码在 中可见。

强力推荐前端面试刷题神器