URL不能在facebook标签上工作

Question

这里有一个奇怪的问题。

我有一组社交媒体图标，在悬停时进行动画处理，但是当它们在他们驻留的Facebook选项卡上查看时，它们链接的url不会打开。

内容所在的网页打开网址的罚款，所以问题只出现在选项卡本身查看时（加上也在jsfiddle中查看时）链接无法打开。

这里有一个的jsfiddle所以你可以看到这个问题在你的jsfiddle Facebook图标http://jsfiddle.net/dn6d4/8/

HTML

<a href="http://www.google.co.uk"><div class="fbook-hover social-slide"></div></a> 

CSS

.fbook-hover { 
background-image: url('https://www.magnetikmedia.co.uk/images/smedia/fbook.png'); 
} 
.social-slide { 
height:270px; 
width: 225px; 
margin: 22px; 
float: left; 
-webkit-transition: all ease 0.3s; 
-moz-transition: all ease 0.3s; 
-o-transition: all ease 0.3s; 
-ms-transition: all ease 0.3s; 
transition: all ease 0.3s; 
} 
.social-slide:hover { 
background-position: 0px -270px; 
} 

Answer 1

点击给出一个JavaScript错误：

Refused to display 'https://www.google.co.uk/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

这是因为http://google.co.uk重定向到https://google.co.uk，Google不允许他们的网站显示在另一个网站的iframe中。

Facebook选项卡显示在iframe中，因此如果您尝试链接到Facebook图标的页面也将X-Frame-Options设置为SAMEORIGIN那么这将解释您的问题。

有关于X-Frame-Options标题here的更多信息。

您将无法更改您链接到的网站上的标题，因此我认为您可以使用当前设置避免此问题。

我会建议将target='_blank'添加到您的链接中，以便它在新选项卡中打开。