如何在网页上发布HTML电子邮件？_Html_Dom

如何在网页上发布HTML电子邮件？

html dom

如何在网页上发布HTML电子邮件？,html,dom,Html,Dom,我想在我的网站上发布一封电子邮件。电子邮件消息源如下所示： <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <

我想在我的网站上发布一封电子邮件。电子邮件消息源如下所示：

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>My newsletter</title>
        <style type="text/css">
            p{
                margin:10px 0;
                padding:0;
            }
            table{
                border-collapse:collapse;
            }
        </style>
    </head>
    <body style="height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
        <center>
            <table align="center" border="0" cellpadding="0" cellspacing="0">
                <!-- etc, you know what HTML email looks like in 2020... -->
            </table>
        </center>
    </body>
</html>

这种方式可以工作，但它会添加不必要的滚动条。我更喜欢将电子邮件呈现为常规的

，而不是在其自己的视口中。有没有办法将我的电子邮件的

节点包含到我的基本

HTML

文档中，同时尽可能保留内部文档的布局？

还是我，发布我自己的答案，灵感来自以下评论：

可以使用“自定义元素”构建包含样式的独立DOM

这个答案用来解决如何在另一个HTML文档（我的网站）中包含HTML文档（在我的例子中是电子邮件）的问题

首先，我在希望我的电子邮件出现的位置放置了一个

标签。其次，我在

标记中包含了电子邮件的原始来源，这会阻止web浏览器实际呈现它

<!doctype html>
<html>
    <head>
        <title>Welcome to my website</title>
    </head>
    <body>
        <h1>Have a look at the following email:</h1>
        <my-email-message />

<template id="raw-email-message">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--------------8<------------->
</html>
</template>

    </body>
</html>

最终的结果是电子邮件在我的收件箱中的显示非常准确，显示在网页上而不会弄乱它的布局。但是，我仍然不确定这是否是正确的方法，以及安全含义是什么。

如果您在放入div的“注入”电子邮件中设置了类格式，则电子邮件中的类将影响您的页面。这就是为什么通常使用iFrame。你可以在iframe上隐藏滚动条。我知道。不过，我如何将电子邮件包含在div中而不是iframe中？您可以使用“自定义元素”来构建包含样式的独立DOM。

<!doctype html>
<html>
    <head>
        <title>Welcome to my website</title>
    </head>
    <body>
        <h1>Have a look at the following email:</h1>
        <my-email-message />

<template id="raw-email-message">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--------------8<------------->
</html>
</template>

    </body>
</html>

customElements.define('raw-email-message',
                      class extends HTMLElement {
                          constructor() {
                              super();
                              const template = document
                                  .getElementById('email-message')
                                  .content;
                              const shadowRoot = this.attachShadow({mode: 'open'})
                                                     .appendChild(template.cloneNode(true));
                          }
                      });