根据URL href隐藏元素

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时URL是正确的 - 为什么会这样？

最终更新：我编辑了错误的文件。哈哈...

- kawnah

---

https://jsfiddle.net/ce86zb3r/13/ 代码来自这里。 - hansTheFranz

可能是重复的问题：jquery如何检查URL是否包含单词？ - hansTheFranz

你得到了-1，所以它不会进入If条件。 - Ahmed Sunny

在控制台中检查windowURL，然后在您的网站中为其设置条件。 - Ahmed Sunny

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>

您的代码没问题。您只需要确保使用嵌入页面的URL文本而不是嵌入它的页面。

- Alberto Trindade Tavares

---

好的解释.. - Nihal

谢谢你的回复，这在这个情境下很有意义。在我的真实世界例子中（很遗憾我不能分享，因为它还没有公开），我基本上需要在URL中出现特定字符集时隐藏一个元素。如果我使用console.log打印windowURL变量并返回正确的URL，那么这段代码不起作用的原因是什么？ - kawnah

这取决于您在indexOf中搜索的字符串。您确定它是一个子字符串，考虑到大小写（大写，小写）吗？如果是，它应该可以工作。如果您可以分享用于搜索的URL和字符串，那么我们帮助您会更容易。 - Alberto Trindade Tavares

@AlbertoTrindadeTavares，我能说的是在控制台中直接运行此代码是有效的。 我需要弄清楚如何触发它 - 我正在寻找的字符串是由搜索功能生成的。 - kawnah

Answer 2

关于你的代码片段，显示结果的 iFrame 中包含 jshell 的 URL。

我已经更新了你的代码片段，并在此处展示了它的工作效果：

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

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

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

- BenM