网址在“ Facebook”标签上不起作用

debugcn 发表于 Dev

jfar_2020

这里有点奇怪的问题。

我有一组社交媒体图标，它们会在鼠标悬停时进行动画处理，但是在它们所驻留的Facebook选项卡上查看它们时，它们链接到的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;
}

马特金斯

单击您的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'到您的链接，以便它在新选项卡中打开。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。