Javascript 当url包含特定参数时隐藏页眉/页脚_Javascript_Html_Css

Javascript 当url包含特定参数时隐藏页眉/页脚

javascript html css

Javascript 当url包含特定参数时隐藏页眉/页脚,javascript,html,css,Javascript,Html,Css,我有一个多页网页，所有页面上都有页眉和页脚，我正在创建一个可以查看页面某些区域的应用程序，但我不想在浏览应用程序时显示页脚和页眉当我通过应用程序访问页面时，应用程序会向url添加一个参数。像这样： www.mypage.com?inapp=true 使用java脚本和css最有效的方法是什么？ <script> $(document).ready(function(){ var url = window.location.href; if

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

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

www.mypage.com?inapp=true

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


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

$（文档）.ready（函数（）{
var url=window.location.href；
if（url.search（'inapp=true'）==true）{
$（'header'）.css（'display'，'none'）；
}
});

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

根据是否传递参数（？hide），可以使用设置两个不同的类：

您可以在url中搜索参数并隐藏元素（如果他在场）

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

var url=“www.test.fr？inapp=true”//替换为window.location.href
如果（url.indexOf（“？”）=-1）//参数存在
{
var urlparameters=url.split（“？”[1]；
var parameters=urlparameters.split（&）；//将所有参数存储在数组中
//循环每个参数
参数.forEach（函数（项、索引）{
var parameterName=item.split（“=”[0]；//参数名称
var parameterValue=item.split（“=”[1]；//参数值
if（parameterName==“inapp”&¶meterValue==“true”）
{
log（“隐藏页眉/页脚”）；
//隐藏页眉/页脚元素
document.getElementsByTagName（“标题”）[0].style.display=“无”；
document.getElementsByTagName（“页脚”）[0].style.display=“无”；
}
});
}

标题
页脚

这里是纯Javascript，不需要jQuery 您可以这样做（不要忘记在

if

语句中添加您的URL而不是

您的URL'

）：

if（window.location.href==“您的URL”）{
document.getElementById（'header'）.style.display='none'；
document.getElementById（'footer'）.style.display='none'；
}

div{
利润率：10px；
宽度：50px；
高度：50px；
背景颜色：绿色；
}

使用PHP url是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以在设置特定查询字符串时显示隐藏。

我建议在其中添加一个具有必要样式的样式标记。当页眉第一次呈现然后隐藏时，这不会产生“闪烁”效果，而只有在加载页面后才会发生这种情况

此解决方案用于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>


if（window.location.href.includes（'inapp=true'）==true）{
var style=document.createElement（'style'）；
style.innerHTML=`
#标题{
显示：无！重要；
}
.第页{
填充顶部：0px！重要；
}
`;
document.head.appendChild（样式）；
}

注意：将其添加到标题。

您可以/是否使用jQuery？我想在一些页面上，我可以，但不是所有页面上，这样做会更容易。所以我试着避免它。我做了一些类似的事情，它是有效的，但是我不需要在所有的页面上都这样做吗？没有一种解决方案可以让你这样做一次，然后项目被隐藏，用户在页面上导航的地方没有仪表？你可以通过使用localStorage以持久的方式存储用户在应用程序中的信息来减少代码，但是，如果设置了localStorage设置，您仍然需要在每个页面上使用if语句和javascript来确定是否隐藏页眉和页脚。虽然这会起作用，但我认为最好能够检测参数并检查其值，这样您就不必依赖特定的url格式。当然，为此，您需要添加自定义的

if

语句，上面的代码仅用于特定的URL。

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

<body>....</body>

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

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