当url包含某个参数时隐藏页眉/页脚答案

【问题标题】：Hide header/footer when url contains a certain parameter当url包含某个参数时隐藏页眉/页脚
【发布时间】：2021-03-31 15:40:14
【问题描述】：

我有一个多页网页，所有页面都有页眉和页脚，我正在创建一个可以查看页面某些区域的应用程序，但我不想在浏览应用程序时显示页脚和页眉。

当我通过应用程序访问页面时，应用程序会在 url 中添加一个参数。像这样：

www.mypage.com?inapp=true

使用 java 脚本和 css 最有效的方法是什么？

【问题讨论】：

你能/你使用jQuery吗？我认为这样做会更容易
在某些页面上我可以但不是全部。所以我试图避免它。

标签： javascript html css

【解决方案1】：

<script>
    $(document).ready(function(){
        var url = window.location.href;
        if(url.search('inapp=true') === true){
            $('header').css('display', 'none');
        }
    });
</script>

【讨论】：

【解决方案2】：

您可以在 url 中搜索参数并在他存在时隐藏元素。

JavaScript 解决方案测试每个参数以获得更多字体

var url = "www.test.fr?inapp=true"; //replace with window.location.href


if(url.indexOf("?")!=-1)//parameters exists
{
  var urlparameters = url.split("?")[1];
  var parameters = urlparameters.split("&");//store all parameters in array
  //loop on each parameter  
  parameters.forEach(function(item,index){
    var parameterName=item.split("=")[0]; //parameter name
    var parameterValue=item.split("=")[1];//parameter value
    if(parameterName=="inapp" && parameterValue=="true")
    {
      console.log("hide header/footer");
      //Hide header/footer elements
      document.getElementsByTagName("header")[0].style.display="none";
      document.getElementsByTagName("footer")[0].style.display="none";
    }
  });
  
}

<header>header</header>
<footer>footer</footer>

JavaScript 解决方案只测试inapp=true

var url = "www.test.fr?inapp=true"; //replace with window.location.href


if(url.indexOf("inapp=true")!=-1)//inap = true
{
   document.getElementsByTagName("header")[0].style.display="none";
   document.getElementsByTagName("footer")[0].style.display="none";   
}

<header>header</header>
<footer>footer</footer>

【讨论】：

【解决方案3】：

如果 jQuery 没问题：

var headerSelector = "#header"; // TODO: replace as needed
var footerSelector = "#footer"; // TODO: replace as needed

if(window.location.search.indexOf("inapp=true") !== -1) {
    $(headerSelector).hide();
    $(footerSelector).hide();
}

【讨论】：

我做了这样的事情，它有效，但我不需要在所有页面上都这样做吗？有没有解决方案，你可以这样做一次，然后隐藏项目，没有用户在页面上导航的仪表？
您可以通过使用 localStorage 以持久方式存储用户在应用程序中来减少代码，但您仍然需要在每个页面上使用 if 语句和 javascript 来确定隐藏标题如果设置了 localStorage 设置，则为页脚。

【解决方案4】：

使用 PHP

网址是 www.mypage.com?inapp=true 所以如果你需要在'inapp'为真时隐藏页眉和页脚

<?php if($_GET['inapp'] != 'true') {?>
    <header>...</header>
<?php } ?>

<body>....</body>

<?php if($_GET['inapp'] != 'true') {?>
   <footer>...</footer>
<?php } ?>

这里根本不加载页眉和页脚，但如果您只想隐藏页眉和页脚，请添加 css 以在设置特定查询字符串时显示隐藏。

【讨论】：

【解决方案5】：

我建议在其中添加一个包含必要样式的样式标签。当第一次渲染标题然后隐藏时，这不会产生“闪烁”效果，当您仅在页面加载后执行此操作时会发生这种情况。

此解决方案用于 Squarespace 模板。

这是我的纯 JS 代码，因为 JQuery 并不总是可用且已过时。

<script type="text/javascript">
if(window.location.href.includes('inapp=true') === true){
  var style = document.createElement('style');
  style.innerHTML = `
  #header {
    display: none !important;
  }
  .page-section {
    padding-top: 0px !important;
  }
`;
  document.head.appendChild(style);
}
</script>

注意：将此添加到标题中。

【讨论】：

【解决方案6】：

您可以使用PhP shorthand IF 设置两个不同的类，具体取决于您是否传递a 参数(?hide)：

<div class="<?php echo ($_SERVER['QUERY_STRING'] == "hide" ? 'hidden' : 'visible');?>"></div>

然后定义一些 CSS：

.hidden{
    display: none;
}

【讨论】：

【解决方案7】：

这里是纯 Javascript，不需要 jQuery

>

您可以这样做（不要忘记在if 语句中添加您的网址 而不是'Your URL'）：

if(window.location.href == 'Your URL') {
  document.getElementById('header').style.display = 'none';
  document.getElementById('footer').style.display = 'none';
}

div {
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: green;
}

<div id="header"></div>
<div id="footer"></div>

干杯

【讨论】：

虽然这样可行，但我认为最好能够检测到参数并检查其值，然后您就不要依赖特定的url格式。
当然，为此您需要添加自定义的if 语句，上面的代码仅用于特定的URL。