Question

我正试图想出一种在我客户的网站上显示电子邮件简报存档的方法。问题在于新闻简报中充满了无数的内联风格，非常适合在Outlook或其他任何地方看到它们，但它们在其他风格很好的网站上看起来并不太热。

我的目标是让我的客户能够复制生成的简报的完整源代码（她的列表管理公司*允许她访问）并将其粘贴到CMS（drupal，如果它有所作为）。

*不断联系？邮件黑猩猩？我忘了。其中之一。

然后我想在她的网站上，在网站其余部分的基本结构（标题，导航等）内显示它。如果这是1997年，我会说“iframes！”并完成它，但A）这似乎是一个蹩脚的解决方案，B）代码实际上并不存在于页面上，我认为这是iframe所必需的。

我可以在这个HTML块周围添加某种标记，以将其与网站的其他部分区分开来吗？或者还有另一种方法可以解决这个问题吗？

谢谢！

Answer 1

IFrame是我能够找到的唯一途径。唯一的替代方法是覆盖父页面CSS中的每个样式以用于新闻稿显示区域。

如您所述，使用iframe可能需要您在独立文件中托管新闻稿。我知道的唯一替代方法是，您可以使用JavaScript动态创建和/或填充iframe。

如果您使用此方法，您可以将新闻稿存在于具有特定类的div中，然后使用JavaScript将div移动到iframe中。最大的缺点是，如果没有启用JavaScript，用户就不会这样做。

Answer 2

你有没有理由不能使用模态？这将允许您强制新请求并通过不应用通用样式表同时使用户保持在所需页面上来使页面呈现您想要的方式。当然，它没有显示内联的元素，但它几乎在功能上是等同的。

Answer 3

在我看来，剪切和粘贴原始HTML会带来太多安全问题。永远不要相信用户的输入。即使内容完全是良性的，下周的时事通讯设计师可能会决定更改格式或合并一些javascript，你将对可能出错的任何事情负责。

因此，我会实现一个除了内容部分之外的任何解析器，只留下b，a，h *，blockquote和类似的简单元素，比如论坛帖子中允许的元素，以及它们的样式。之后，您可以将其显示为CMS中的普通帖子。我没有看到任何理由为什么它应该看起来不同。

至于如何将其与其他CSS隔离，如果您小心CMS的所有CSS规则都适用于具有特定类的元素，那么您并不需要这样做。或者，为您的帖子执行CSS重置：

.post p {
     margin: 0;
     ... 
.post /* all the standard CSS reset rules preceded with .post */

然后

<div class="post"> content parsed from your CMS </div>

Answer 4

9年后，仍然没有更好的解决方案。

如果您没有外部资源（无法将html手动添加到框架中），则需要使用js插入凌乱的html / css（在我的情况下，我将使用它来查看电子邮件）

<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>

和js：

const frame = document.querySelector('.my-frame');

frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();

Answer 5

我没有用过但希望在类似情况下发挥作用的另一个选择是使用Shadow DOM，它是Web Components规范的一部分。我主要担心的是，我们仍然有一些用户正在使用IE 11，并且尽管似乎支持polyfills，但根据我read elsewhere的看法，覆盖所有浏览器似乎并不直接。

here和here中提供了有关如何使用Shadow DOM达到此效果的一些详细信息。我还创建了a small gist，它是为了展示我在了解Shadow DOM的工作原理时一直在制定的基本思想，随着我的学习，我将对其进行更新。在下面，您可以查看该要点内容的快照。

<!doctype html>
<html>

<head>
    <style>
        .row {
            display: flex;
        }

        .column {
            flex: 50%;
            padding: 10px;
            height: 300px;
        }

        * {
            color: Red;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="column" style="background-color:#aaa;">
            <h2>Column 1</h2>
            <div id="content1">
                SOME CONTENT FROM CMS
            </div>
        </div>
        <div class="column" style="background-color:#bbb;">
            <h2>Column 2</h2>
            <div id="content2">
                SOME MORE CONTENT FROM CMS
            </div>
        </div>
    </div>

    <script>
        document
            .getElementById("content1")
            .attachShadow({ mode: 'open' })
            .innerHTML = `
                <style>
                    *{all:initial} 
                    style{display: none}
                    div{display: block}
                </style>
                <h3>This text is not red</h3>
                <div>slot content: <slot></slot></div>`;

        document
            .getElementById("content2")
            .attachShadow({ mode: 'open' })
            .innerHTML = `
                <style>
                    *{all:initial} 
                    style{display: none}
                    div{display: block}
                </style>
                <h3>This text is not red</h3>
                <div>slot content: <slot></slot></div>`;
    </script>
</body>

</html>

有没有什么方法可以显示一些与网站其他网站风格隔离的重型HTML？

5 个答案: