为什么左键单击时此链接不会围绕跨度锚定？答案

【问题标题】：Why won't this link anchor around a span open on left click?为什么左键单击时此链接不会围绕跨度锚定？
【发布时间】：2015-03-16 12:08:52
【问题描述】：

我试图了解如何创建一个可以在 div 内的任何位置单击的链接，并从另一个堆栈交换问题 which can be found here. 中找到了我的问题的解决方案@

它的概念很简单，看起来应该可以工作，但我在技术上遇到了问题。具体来说，尽管光标指示已找到链接，但单击该链接不会导致页面移动。但是，右键单击我想成为链接的区域并选择“在新选项卡中打开”会将我定向到链接的内容。

HTML：

<div class="container">
hello
    <a href="https://www.google.com">
        <span class="link-spanner"></span>
    </a>
</div>

CSS：

.container{
    width:200px;
    height:200px;
    background-color:black;
    color:white;
    /*Important:*/
    position:relative;
}

/*Important:*/
.link-spanner{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
  make sure you have an empty gif 
  background-image: url('empty.gif');*/
}

我的浏览器会识别链接但在左键单击时无法打开该链接，这是否有原因？我正在使用 chrome 版本 39。可以在 in this JSFiddle page 找到相同的行为，它来自上面提供的答案的 cmets 之一。左键单击链接不会像应有的那样将我定向到谷歌。

【问题讨论】：

标签： html css hyperlink anchor

【解决方案1】：

将 target="_blank" 添加到您的 html：

<a href="https://www.google.com" target="_blank">
<!-- Code -->
</a>

这是fiddle。

问候，

米兰。

【讨论】：

添加 target="_blank" 并不能解决我遇到的问题（链接仍然无法使用），我也不想在另一个选项卡中打开这些链接。跨度>

【解决方案2】：

发生这种情况是因为 google.com 服务器配置为拒绝来自 <frame>、<iframe> 或 <object> 的请求。 jsFiddle 和其他代码编辑网站使用<iframe> 来显示结果，所以如果你尝试打开一个锚href，它将被加载到同一个<iframe>，而不是实际上在浏览器窗口（浏览器框架）中。

X-Frame-Options 是 HTTP response header。这意味着，它来自服务器（在您的情况下来自 google.com）。它可以防止将 google.com 站点的内容嵌入到其他站点中。大多数主流浏览器都支持这个header，但还没有完全标准化。

如果您尝试打开允许 X-Frame 的站点（请参阅：jsFiddle）。该页面在<iframe> 内加载。

实际上，如果您不尝试在框架中呈现 google.com，您的 html 将正常工作。

更多信息请访问：MDN

【讨论】：

这仍然让我感到困惑，只是因为它不能在我自己的网站上运行，该网站没有 iframe 并且针对我自己的内容。可能是因为我将 drupal 用作 cms 并将代码放在我的“节点”类之一中吗？
我不熟悉drupal。你可以试试这个：jsfiddle.net/hf75B/721。它的工作，但我希望它工作。（不要指望这可以在 jsFiddle 中工作，它会阻止试图从 iframe 中取出的所有内容）。