1

这里有点奇怪的问题。

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

内容所在的网页可以很好地打开 url，所以问题似乎只是在选项卡本身上查看它时（加上在 jsfiddle 中查看它时）链接不会打开。

这是一个 jsfiddle，所以你可以看到问题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;
}
4

1 回答 1

0

单击 jsfiddle 中的 Facebook 图标会出现 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标题的信息。

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

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

于 2013-10-16T09:02:52.547 回答