Hide header/footer when url contains a certain parameter

前端未结

关注

 6  1693

I have a multi page webpage that has a header and footer on all pages, and I am creating an app than can view certain areas of the page, but I dont want to show the footer and h

相关标签:

6条回答

清酒与你

2021-01-22 17:28

If jQuery is ok:

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();
}

0 讨论(0)

谎友^

2021-01-22 17:32

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

0 讨论(0)

逝去的感伤

2021-01-22 17:35
Using PHP

url is www.mypage.com?inapp=true so if you need to hide header and footer when 'inapp' is true
```
<?php if($_GET['inapp'] != 'true') {?>
    <header>...</header>
<?php } ?>

<body>....</body>

<?php if($_GET['inapp'] != 'true') {?>
   <footer>...</footer>
<?php } ?>
```
here header and footer are not loading at all but if you wish to just hide header and footer add css to display hide when that particular query string is set.
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2021-01-22 17:44
You can use a PhP shorthand IF to set two different classes, depending on whether you pass a a parameter (?hide) or not:
```
<div class="<?php echo ($_SERVER['QUERY_STRING'] == "hide" ? 'hidden' : 'visible');?>"></div>
```
Then define some CSS:
```
.hidden{
    display: none;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

半阙折子戏

2021-01-22 17:50

You can search the parameter in the url and hide the elements if he's present.

JavaScript solution test each param for more fontionnality

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 solution for only test the 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>

0 讨论(0)

鱼传尺愫

2021-01-22 17:52

Here is pure Javascript, no jQuery needed

You can do it like this (don't forget to add your URL instead of 'Your URL' in if statement):

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>

Cheers

0 讨论(0)

Hide header/footer when url contains a certain parameter

Using PHP

Here is pure Javascript, no jQuery needed