Question

我需要隐藏基于window.location.href对象的元素。我的方法如下：

$(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>

预期的结果是隐藏红色方块。但它仍然显示。关于我做错了什么，我有点迷茫，因为这看起来非常基本/直截了当......这可能是我想念的小事。任何帮助，将不胜感激。

这是一个JSfiddle，也展示了同样的问题：https://jsfiddle.net/ce86zb3r/8/

更新：由于iFrames，代码在此特定上下文中遇到了问题，但它在我正在处理的网站上无效，尽管在console.log编辑时网址是正确的 - 为什么那会吗？

最终更新：我正在编辑错误的文件。洛尔...

Answer 1

如果您console.log windowUrl变量，您会发现它不是StackOverflow页面，而是https://stacksnippets.net/js（它提供了嵌入到SO中的代码段）。因此，将要搜索的字符串更改为＆＃34; stacksnippets＆＃34;，它可以工作：

＆＃13;

$(document).ready(function() {
   var windowURL = window.location.href;
   console.log(windowURL);

   if (windowURL.indexOf('stacksnippets') > -1) {
     $('#hide-this').css('display', 'none');
   }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

你的代码很好。您只需要确保使用嵌入页面的URL中的文本而不是嵌入页面的页面。

Answer 2

对于你的小提琴，显示结果的iFrame有一个包含jshell的网址

我已经更新了你的小提琴并显示它在这里工作：

length()

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

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

隐藏基于URL href的元素

2 个答案: