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

Question

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

Works fine for me. Are you trying to put it in an iframe or something? — Mike Cluck
– Mike Cluck, Commented Apr 26, 2016 at 16:56
Hmmm... Im using exactly the same html code, like I published here... and not works. I was try Firefox, Firefox Developer and Chrome. Not works :-( — steelbull
– steelbull, Commented Apr 26, 2016 at 17:01

Travis · Accepted Answer · 2016-04-26 17:02:00Z

4

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/

answered Apr 26, 2016 at 17:02

Travis

12.4k8 gold badges44 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

steelbull Over a year ago

Yeeees! This is the corrent answer. It needs to run thrue the webserver. Thank you.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related