无法使用 Google 代码在“DOMWindow”上执行“postMessage”答案

【问题标题】：Failed to execute 'postMessage' on 'DOMWindow' using Google code无法使用 Google 代码在“DOMWindow”上执行“postMessage”
【发布时间】：2016-08-20 15:31:55
【问题描述】：

我想在我的网站上添加一个 Google+ 徽章。当我从 Google 配置工具复制/粘贴代码时，徽章不起作用。我认为问题可能出在 JavaScript 中，所以我创建了一个空 index.html 并复制/粘贴 Google 代码……但它仍然无法正常工作：

谷歌代码：

<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="250" data-href="https://plus.google.com/110789175777197362579" data-theme="dark" data-rel="publisher"></div>

index.html 中的完整 HTML

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>

<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="250" data-href="https://plus.google.com/110789175777197362579" data-theme="dark" data-rel="publisher"></div>

<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
</body>
</html>

在控制台中我可以看到以下错误：

在“DOMWindow”上执行“postMessage”失败：提供的目标源（“null”）与接收窗口的源（“null”）不匹配。人
不推荐使用 getAttributeNode()。请改用 getAttribute()。 rs=AGLTcCOasCY_GkJWPJtHt2mUGUYuzPzTCg%20line%209%20%3E%20eval:34:434
在“DOMWindow”上执行“postMessage”失败：提供的目标源（“null”）与接收窗口的源（“null”）不匹配。人
在“DOMWindow”上执行“postMessage”失败：提供的目标源（“null”）与接收窗口的源（“null”）不匹配。 postmessageRelay
在“DOMWindow”上执行“postMessage”失败：提供的目标源（“null”）与接收窗口的源（“null”）不匹配。 postmessageRelay
在“DOMWindow”上执行“postMessage”失败：提供的目标源（“null”）与接收窗口的源（“null”）不匹配。 postmessageRelay
在“DOMWindow”上执行“postMessage”失败：提供的目标源（“null”）与接收窗口的源（“null”）不匹配。 postmessageRelay
在“DOMWindow”上执行“postMessage”失败：提供的目标源（“null”）与接收窗口的源（“null”）不匹配。 postmessageRelay
在“DOMWindow”上执行“postMessage”失败：提供的目标源（“null”）与接收窗口的源（“null”）不匹配。 postmessageRelay

【问题讨论】：

Works fine for me. 你是想把它放在 iframe 中还是什么的？
嗯...我使用完全相同的 html 代码，就像我在这里发布的一样...但不起作用。我尝试了 Firefox、Firefox Developer 和 Chrome。不工作:-(
Google API in Javascript的可能重复

标签： javascript html google-plus badge

【解决方案1】：

问题可能在于 Google+ 徽章可能要求您通过网络服务器运行代码，而不是通过文件系统在本地查看代码。

不要只打开 HTML 文件，而是尝试使用 Web 服务器托管它。这里有很多选择。如果你安装了 Python，你可以尝试运行：

cd [directory where file is located]
python -m SimpleHTTPServer 8080

然后在 http://localhost:8080 的网络浏览器中查看它

我认为这可能是问题的原因是，在文件系统本地运行它时我也会出错（虽然与你的错误不同），但是当我通过网络浏览器查看它时，它工作正常，比如所以：

https://jsfiddle.net/wwkdgL5b/

【讨论】：

耶！这是正确的答案。它需要通过网络服务器运行。谢谢。