联系表单小部件，以使其被另一个网站使用

Question

我必须创建一个“联系表单”窗口小部件-用户可以将其粘贴到任何包含一个小表格的网站（我希望其供客户的网站使用）中的一段代码，我读了很多博客和代码，提出Vanilla Js最适合我的要求的答案，我想要一些参考或博客或代码以使其成为可能。  关于如何执行此操作，我有很多想法，但我很想知道是否有任何公认的方法来包含样式，JavaScript等。我现在能想到的最好的方法是提取所有必要内容的代码块外部网址中的样式和标签。

Answer 1

这是一个广泛的主题，解决方案将取决于您希望与宿主页面进行多少集成或隔离。如果您希望联系表单始终看起来一样，则iframe确实是正确的解决方案，但有其局限性。您表单中的弹出窗口将无法转义 iframe。垂直大小可能是一个问题，您可能需要研究Pym.js来解决此问题。

请注意，这并不意味着您需要向客户端网站提供iframe的HTML代码。您可以给他们一个脚本标签，该脚本标签指向负责构建iframe的JavaScript程序。

如果您希望表单与客户端站点无缝集成，并继承样式，那么您的脚本将需要使用DOM API或使用innerHTML将表单注入页面。然后，将需要一些反复试验才能确定要强制执行的CSS属性以及可以从宿主页继承的属性。您需要为CSS类命名空间并使用CSS specificity。它并不总是那么简单，也永远不会完全防弹，因此，如果您坚持使用iframe，将会更加安全。

在两种情况下，为了知道要在哪里注入表格，您可以使用脚本标签本身作为参考，例如，为其提供一个唯一的数据属性，脚本将使用该属性来查找自己的脚本标签并插入下方或下方的表单。

要全面了解该主题，我强烈推荐曼宁（Manning）出版的第三方JavaScript 。