Question

我试图了解如何创建一个可以在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，这是来自上面提供的答案之一。左键单击链接不会像我应该那样引导我谷歌。

Answer 1

将 target =＆＃34; _ blank＆＃34; 添加到您的html：

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

这里是fiddle。

此致

米兰。

Answer 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

为什么这个链接会在左键点击打开的范围内赢得？

2 个答案: