Facebook喜欢和Twitter tweet按钮导致跨域问题 [英] Facebook like and Twitter tweet buttons causing Cross Domain Issues

问题描述

我同时使用twitter tweet按钮和Facebook喜欢的按钮

 < a href =http： /twitter.com/share
 class =twitter-share-button
 data-url =http://example.com
 data-text =some text
 data-count =horizo​​ntal
 data-via =someone> Tweet 
< / a> 
< script type =text / javascriptsrc =http://platform.twitter.com/widgets.js>< / script> 
 
< script src =http://connect.facebook.net/en_US/all.js#xfbml=1>< / script> 
< fb：like 
 class =fbShare
 href =http://example.com
 font =send =true
 layout =button_count
 show_faces =false> 
< / fb：like> 
  

但是他们都吐出了跨域错误，不是一两个， p>

实际错误（含替换）

不安全的JavaScript尝试访问
frame with URL
https://www.facebook.com/plugins/like.php?channel_url=http%3A%2F ％2Fstatic.ak.fbcdn.net％2Fconnect％2Fxd_proxy.php％3Fversion％3D3％23cb％3Df3cde04b84％26origin％3Dhttp％253A％252F％252Fexample.com％252Ff20b9fb1fc％26relation％3Dparent.parent％26transport％3Dpostmessage& href = http ％253A％252F％252Fexample.com％252F& layout = button_count& locale = en_US& node_type = link& sdk = joey& send = true& show_faces = false& width = 150

http://example.com/ 。域。
协议和端口必须匹配。

不安全的JavaScript尝试访问
框架与URL
http ：//platform0.twitter.com/widgets/tweet_button.html？_ = 1308700896075& count = horizo​​ntal& id = twitter_tweet_button_0& lang = en& original_referer = http％3A％2F％2Fexample.com％2F& text = some < a> text& url = http％3A％2F％2Fexample.com％2F& via =某人
来自带有网址的框架
http： //example.com/ 。域，
协议和端口必须匹配。

解决方案

bug的Twitter按钮代码，你可能想用Twitter登录。它似乎试图遍历页面上的每个dom对象，它不能访问Facebook的iframe对象。例如，如果您还添加了Google +1按钮，则现在将抛出一个类似的附加消息，但会显示Google相关网址。

此功能似乎不是受影响，所以我只是忽略它。任何使用此Tweet按钮的网站以及来自其他服务器的其他iframe（例如Facebook / G +按钮）也会出现同样的问题（例如，尝试 mashable上的任何网页）。 com ）。如果您不想忽略它，您可以删除Twitter的javascript参考，并创建一个自定义Tweet按钮，如其 Tweet按钮页上所述，使用javascript弹出此网址格式： http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button ，其中的缺点是，推文计数不会显示在您的页。

I am using both the twitter tweet button, and the facebook like button

<a href="http://twitter.com/share" 
   class="twitter-share-button"
   data-url="http://example.com"
   data-text="some text"
   data-count="horizontal"
   data-via="someone">Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like 
   class="fbShare" 
   href="http://example.com" 
   font="" send="true" 
   layout="button_count" 
   show_faces="false">
</fb:like>

But both of them are spitting out Cross domain Errors, Not one or two, but continuously.

the actual errors (with substitutions) are

Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/plugins/like.php?channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df3cde04b84%26origin%3Dhttp%253A%252F%252Fexample.com%252Ff20b9fb1fc%26relation%3Dparent.parent%26transport%3Dpostmessage&href=http%253A%252F%252Fexample.com%252F&layout=button_count&locale=en_US&node_type=link&sdk=joey&send=true&show_faces=false&width=150 from frame with URL http://example.com/. Domains, protocols and ports must match.

Unsafe JavaScript attempt to access frame with URL http://platform0.twitter.com/widgets/tweet_button.html?_=1308700896075&count=horizontal&id=twitter_tweet_button_0&lang=en&original_referer=http%3A%2F%2Fexample.com%2F&text=some text&url=http%3A%2F%2Fexample.com%2F&via=someone from frame with URL http://example.com/. Domains, protocols and ports must match.

解决方案

This seems to be a bug with the Twitter button code that you would probably want to log with Twitter. It seems to be attempting to traverse every dom object on the page and it is not able to access the Facebook iframe object. For example, if you also add the Google +1 button, it will now throw an additional similar message but for Google related urls.

The functionality doesn't seem to be impacted though so I would just ignore it. Any site using this Tweet button and also another iframe from a different server (eg Facebook/G+ button) will also have the same issue (for example try any page on mashable.com). If you do not want to just ignore it, you could remove the Twitter javascript reference and create a custom Tweet button as mentioned on their Tweet button page, by using javascript to popup this url format: http://twitter.com/share?url=http%3A%2F%2Fdev.twitter.com%2Fpages%2Ftweet-button, with the downside of this being that the tweet count won't show on your page.

这篇关于Facebook喜欢和Twitter tweet按钮导致跨域问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！