无法执行 'postMessage' on 'DOMWindow'

支持
1

我已经在论坛上搜索了此问题的答案，并尝试了几种不同的发布选项。

我正在 Digital Ocean Droplet 上运行一个 Ghost 出版物，并在另一个 Digital Ocean Droplet 上运行一个 Discourse 论坛，因为论坛共识似乎是您不应该在同一台服务器上安装两个应用程序。

forum.mysite dot com
mysite dot com

我希望 Discourse 评论出现在每个帖子中，并且我没有 mysite.com/blog URL slug。因此，我遵循了文档，以获取当前站点 URL 并将其用作嵌入 URL。

遵循此处的文档：官方集成文档

我能够在新帖子上显示框架。但是，它没有加载并显示以下错误：
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').

我已确认我的 HTTPS 设置是正确的。我的嵌入 URL 模仿了教程，但我尝试了几种不同的 discourseEmbedUrl：变体来尝试进行故障排除。所有对当前文章 URL 的引用都会导致相同的错误。

我还尝试添加一个等待函数，认为框架可能没有加载，但相同的错误仍然存在。

这是我当前的嵌入代码：

<div id='discourse-comments'></div>
<meta name='discourse-username' content='JosephPaul'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'https://forum.mysite.com/',
    discourseEmbedUrl: '{{url absolute="true"}}',
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

如果您能在此提供任何帮助，我将不胜感激，因为我已经用尽了所有发布的解决方案。我认为这可能与我的论坛和文章在不同的机器上有关。

2

你好 @Joseph3 :wave: 欢迎来到 Discourse Meta :slight_smile:

你看到这个话题了吗？

3

嗨 Lilly，是的，我也遵循了该教程，以仔细检查 ghost 托管的 discourse 安装是否相同。

我已经尝试使用如下的 URL 引用：

discourseEmbedUrl: 'https://mysite.com<%= current_page.url %>'

那里有什么不对吗？

另外，但结果是相同的错误。感谢您的及时回复。

4

这是一个相当常见的错误：Search results for 'Failed to execute 'postMessage' on 'DOMWindow'。这是一个渺茫的希望，但导致错误的一个可能原因是没有填写' - Discourse Meta Discourse 嵌入设置页面上的“创建主题的用户名”设置。

这不应该引起问题。

可能引起问题的是，如果您的 Discourse 站点是私有的：Embed Discourse comments on another website via Javascript

5

您好 Simon，我最初遇到的问题是 Discourse 管理面板中的主题创建用户名不正确。但我已将其修复为在面板以及以下位置都显示 JosephPaul：
<meta name='discourse-username' content='JosephPaul'>

据我所知，这些都是正确的。

我也查看了您发送的第二个链接，我认为一切都正确。我刚尝试将我的 Discourse 站点设置为不需要登录，但这并没有解决问题。

即使是新生成的帖子也存在此问题。

编辑：
我再次尝试按照上面帖子中的建议更改嵌入式 URL。以下代码会重现此错误：

<script type="text/javascript">

setTimeout(5000)
  DiscourseEmbed = {
    discourseUrl: 'https://forum.josephpaul.com/',
    discourseEmbedUrl: 'https://josephpaul.com{{page.url}}' };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

额外的故障排除尝试，遵循 Simon 的帖子：

我已将嵌入式 URL 设置为也包含 www.，正如一位用户建议的那样。现在出现以下错误：

Referer:`https://josephpaul.com/test-post/`
Referer 要么未发送，要么与以下任何主机都不匹配：

josephpaul.com
6

西蒙，你有什么想法吗？如果你需要任何输出或代码示例，我很乐意提供。

7

给我发一封私人消息，附上你嵌入代码的博客文章链接，我会看看。

为了缩小问题的原因范围，如果你能尝试添加你的 Discourse 嵌入页面上的嵌入代码，而无需进行任何修改，只需将 EMBED_URL 替换为博客页面的 URL，那就太好了。

9

嗨 Simon，当然，我很乐意发送代码片段以及指向实时网站的链接。我该如何在 Discourse 上私信？也许我的信任级别不够高。

文档说点击我的名字会弹出一个消息窗口，但我这边看不到。

再次感谢您到目前为止的帮助！我一定会根据最终的解决方案更新我的问题。

10

解决方案已找到 - 感谢 @simon 和 @Lilly 提供的出色支持体验。

根据 Simon 的建议进行的修改：

修改了教程中的代码，不包含已弃用的术语并添加了 if 语句：

<div id='discourse-comments'></div>
<meta name="discourse-username" content="ForumAdminName">

<script type="text/javascript">
  if (window.location.pathname.indexOf('/p/') < 0) {
  DiscourseEmbed = {
    discourseUrl: 'https://forum.test.com/',
    discourseEmbedUrl: '{{url absolute="true"}}',
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
}
</script>

另外，添加了 https://www.test.com 和 https://test.com
到 Discourse 管理员 > 设置选项卡中找到的 Discourse 站点的内容安全策略 src 设置。

注意 - 根据我的经验，在小型服务器上过快地刷新页面，可能需要大约 30 秒才能看到结果，因此请给每次 ghost 重启和 Discourse 管理面板编辑一些时间来生效。

补充说明 - 首次查看任何文章的评论部分时，会有很长的延迟，@simon 建议您自己先查看文章，以便 Discourse 有时间生成与论坛帖子相关的评论部分。

再次感谢大家，非常有帮助。在我观看的教程中，许多 YouTube 评论者遇到了和我一样的问题，这些问题都引用了 discourse/ghost 集成说明。YouTube 链接可能已弃用，因此这次帮助非常棒。

11

很高兴你现在已经解决了。 :+1: 嵌入式有点棘手，因为它在每个设置中并不完全相同。感谢你分享你的经验，我从中受益匪浅。另外，@simon 太棒了，他是我认识的最好、最聪明、最有帮助的人之一。而且他碰巧也很擅长 Discourse。 :slight_smile: