Roecrew Roecrew - 5 months ago 35
Javascript Question

window.location.href redirects to blank page

I'm building a website (http://brandonbarber.co/) that looks like this.

enter image description here

And I have the following code for detecting a click on the linkedin div, it then redirects.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#linkedin").click(function(){
window.location.href = "https://www.linkedin.com/in/brandon-barber-79043593/";
return false;
});
});
</script>
<body>
<div id="banner">
<div class="menubutton" id="home">Home</div>
<div class="menubutton" id="circuitry">Circuitry</div>
<div class="menubutton" id="programming">Programming</div>
<div class="menubutton" id="stackoverflow">Stackoverflow</div>
<div class="menubutton" id="linkedin">Linkin</div>
</div>


But when I click the div, it redirects to a blank page.

enter image description here

What am I missing?

Answer

The issue occurs because your entire site is made up of frames/iframes, so when you use window.location.href = "https://www.linkedin.com/in/brandon-barber-79043593/" you'll prompt the browser to open that page in the iframe which isn't allowed by the source, in this case linkedin. Refused to display 'https://www.linkedin.com/in/brandon-barber-79043593/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

To work around this issue you'll need to use window.open instead of window.location, e.g: window.open('https://www.linkedin.com/in/brandon-barber-79043593/', '_blank');

On a side note, I would recommend to not iframe the source content of the page and instead setting up a CNAME for your for your domain which points at your IP, because the IP is concurrently exposed in the DOM.