Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
209 views
in Technique[技术] by (71.8m points)

javascript - Failed to execute 'postMessage' on 'DOMWindow' using Google code

I would like to add a Google+ badge on my site. When I copy/paste code from Google configuration tool, the badge does not work. I thought the problem might be in the JavaScript so I created an empty index.html and copy/paste the Google Code... but it still does not work:

Google Code:

<!-- 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>

FULL HTML in index.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>

In the console I can see the following errors:

  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). person
  • Use of getAttributeNode() is deprecated. Use getAttribute() instead. rs=AGLTcCOasCY_GkJWPJtHt2mUGUYuzPzTCg%20line%209%20%3E%20eval:34:434
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). person
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
  • Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('null'). postmessageRelay
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The issue may be that the Google+ badge may require you to run the code through a web server instead of viewing it locally through the filesystem.

Instead of just opening the HTML file, try to host it using a web server. There are many options here. If you have Python installed, you could try running:

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

and then viewing it in a web browser at http://localhost:8080


The reason I think this may be the issue is that I also get errors when running it locally off the filesystem (though not the same errors as you), but when I view it through a web browser, it works fine, like so:

https://jsfiddle.net/wwkdgL5b/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...