Hide element based on href url

Question

I need to hide an element based on an object window.location.href. My approach is below:

$(document).ready(function() {
		var windowURL = window.location.href;

		if (windowURL.indexOf('stackoverflow') > -1) {
			$('#hide-this').css('display', 'none');
		}
});

#hide-this {
  width: 100px;
  height: 100px;
  background-color: red;
}

#show-this {
  width: 100px;
  height: 100px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="hide-this"></div>
<div id="show-this"></div>

Run codeHide result

The expected result is to hide the red square. However, he still shows. I lost a bit of what I'm doing wrong, as it seems pretty simple / simple ... Maybe this is something small that I am missing. any help would be greatly appreciated.

Here is a JSfiddle example demonstrating the same problem: https://jsfiddle.net/ce86zb3r/8/

UPDATE: it seems that in this particular context, the code is having problems due to iFrames, but it doesn’t work on the site I'm working on, despite the URL being correct when console.loged is - why should it be?

FINAL UPDATE: I edited the wrong file. Lol ...

Answer 1

console.log windowUrl, , StackOverflow, https://stacksnippets.net/js ( , SO). , "stacksnippets", :

$(document).ready(function() {
   var windowURL = window.location.href;
   console.log(windowURL);

   if (windowURL.indexOf('stacksnippets') > -1) {
     $('#hide-this').css('display', 'none');
   }
});

#hide-this {
  width: 100px;
  height: 100px;
  background-color: red;
}

#show-this {
  width: 100px;
  height: 100px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="hide-this"></div>
<div id="show-this"></div>

Hide result

. , URL- , , .

Answer 2

iFrame, , URL- jshell

, :

https://jsfiddle.net/ce86zb3r/12/

$(document).ready(function() {
var windowURL = window.location.href;

if (windowURL.indexOf('jshell') > -1) {
    $('#hide-this').css('display', 'none');
}
});