2

I was trying to read into how to make a link which can be clicked anywhere within a div and found a solution to my problem from this other stack exchange question which can be found here.

The concept of it is simple and it seems like it should work, but I'm having an issue with the technique. Specifically, clicking on the link will result in no page movement despite cursor indication that it has found a link. However, right clicking in the region that I want to be a link and selecting "open in new tab" will direct me to the linked content.

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');*/
}

Is there a reason why my browser would recognize a link yet not open that link on left click? I'm using chrome version 39. The same behavior can be found in this JSFiddle page which was from one of the comments of the answer supplied above. Left clicking the link will not direct me to google like it should.

Community
  • 1
  • 1
MrKatSwordfish
  • 1,504
  • 5
  • 18
  • 30

2 Answers2

0

Add target="_blank" to your html:

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

Here's the fiddle.

Regards,

Milan.

  • Adding target="_blank" doesn't solve the problem that I'm having (links still won't work) and I also don't want to open these links in another tab. – MrKatSwordfish Jan 18 '15 at 11:09
0

This is happening because google.com server is configured to deny requests coming from a <frame>, <iframe> or <object>. jsFiddle and other code-editing sites using <iframe> to show the result, so if you try to open an anchor href, it will be loaded in the same <iframe>, not actually in the browser window (browser frame).

X-Frame-Options is HTTP response header. This means, it coming from the server (in your case from google.com). It prevents embedding the google.com site's content in other sites. Most major browsers support this header, but it's not fully standardized.

If you try to open site that allow X-Frame (See this: jsFiddle). The page is loaded inside the <iframe>.

Actually your html will work correctly if you do not trying to render google.com in a frame.

More info at: MDN

Ifch0o1
  • 900
  • 1
  • 14
  • 32
  • That still confuses me only because it's not working on my own site which doesn't have an Iframe and is targeting my own content. Could it be because I'm using drupal as a cms and have the code inside one of my "node" classes? – MrKatSwordfish Jan 18 '15 at 11:10
  • I am not familiar with drupal. You can just try this: http://jsfiddle.net/hf75B/721/ . It's work around, but i hope it works. (Don't expect this to work in jsFiddle, it blocking everything that try to get out from the iframe). – Ifch0o1 Jan 18 '15 at 12:51