Question

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

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

www.mypage.com?inapp=true

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

Answer 1

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

Answer 2

您可以搜索网址中的参数，并隐藏元素（如果他在场。

）

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

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript 解决方案仅用于测试inapp=true

＆＃13;

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";   
}

＆＃13;

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

＆＃13;

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

Answer 4

使用PHP

url是www.mypage.com?inapp=true 因此，如果您需要隐藏页眉和页脚，请注意＆＃39; inapp＆＃39;是真的

if ($form->isValid()) {
      $event = new FormEvent($form, $request);
      $dispatcher->dispatch(FOSUserEvents::REGISTRATION_SUCCESS, $event);

      $em = $this->getDoctrine()->getManager();
      $language = $em->getRepository('AppBundle:Language')->findOneBy(['code' => $request->getLocale()]);
      $user->setLanguage($language);
      $user->addRole('ROLE_FARMER');

      $level = $em->getRepository('AppBundle:Level')->find($request->request->get('fos_user_registration_form')['level']);
      $user->getClient()->setLevel($level);
      $user->getClient()->setUser($user);

      try {
          $userManager->updateUser($user);

          $team = new Team();
          $team->setClient($user->getClient());
          $team->setUser($user);
          $em->persist($team);
          $em->flush();
      } catch (\Exception $e) {
          $errorMessage = $e->getMessage();
          $errorForm = $this->showErrors($form, $errorMessage);

          return $this->render('FOSUserBundle:Registration:register.html.twig', array(
                'form' => $errorForm->createView(),
            ));
        }

      if (null === $response = $event->getResponse()) {
          $url = $this->generateUrl('fos_user_registration_confirmed');
          $response = new RedirectResponse($url);
      }

      $dispatcher->dispatch(FOSUserEvents::REGISTRATION_COMPLETED, new FilterUserResponseEvent($user, $request, $response));

      return $response;
  }

此处页眉和页脚根本没有加载，但是如果您希望隐藏页眉和页脚，请在设置特定查询字符串时添加css以显示隐藏。

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

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

Answer 6

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

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

然后定义一些CSS：

.hidden{
    display: none;
}

Answer 7

这是纯Javascript，不需要jQuery

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

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包含特定参数时隐藏页眉/页脚

7 个答案:

使用PHP

这是纯Javascript，不需要jQuery