如何根据查询字符串在页面上显示内容？答案

【问题标题】：How can I show content on a page based on query string?如何根据查询字符串在页面上显示内容？
【发布时间】：2016-08-19 07:13:35
【问题描述】：

我正在与一个使用供应商基于 Web 的应用程序的团队合作。当人们注销时，他们会被重定向到登录页面，我们想在其中添加一条消息。我们无权更改代码（它是云托管的），但我们可以在 URL 中传递查询字符串参数。

我们可以这样做：

http://our.site.com?logout=true

从那里，我想在 h2 或其他东西中显示一条消息。

我们可以自定义页面的 HTML、CSS 和 JS，但我们无法访问应用程序的源代码（否则我会在 PHP 中这样做）。

我认为我可以使用 JS 来更改一些 CSS，但在我所有的试验中，我无法让 CSS 真正改变。

【问题讨论】：

请添加一些代码 sn-p 以使其工作。以便我们准确了解您的卡在哪里。

标签： javascript html css query-string

【解决方案1】：

检查这个答案：Get url parameter jquery Or How to Get Query String Values In js

var logout = getUrlParameter('logout');
if(typeof logout !== "undefined")
{
  // show some div with display: none
  // or put some content to the existing div
}

【讨论】：

【解决方案2】：

根据您上面的问题，我只是了解到您需要一段代码来根据收到的查询字符串在登录页面上显示一些消息。以下是您可以在页脚中添加的一段代码登录页面 html（因为您可以访问 html）。

<script type="text/javascript">
    function getParamValue(querystring) {
          var qstring = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
          for (var i = 0; i < qstring.length; i++) {
            var urlparam = qstring[i].split('=');
            if (urlparam[0] == querystring) {
               return urlparam[1];
            }
          }
    }
    if(getParamValue('logout')=='true'){
         var messageDiv = document.createElement("div");       // Creating a div to display your message
         var message = document.createTextNode("You have successfully logged out.");  // Preparing the message to show
         messageDiv.appendChild(message);                     // Appended the message in newly created div

         var addIn = document.getElementById("login");       //just presuming there is a div having id="login" in which you want to prepend the message
         addIn.insertBefore(messageDiv, addIn.childNodes[0]); //just appended the message on top of login div
         //setting style in your message div
         messageDiv.style.backgroundColor ="#FF0000";
         messageDiv.style.width ="100%";
    }
    </script>

然后把登录页面的链接改成这样：

http://our.site.com/login.php?logout=true

注意：仔细阅读代码cmets，根据你的html结构编辑代码。

【讨论】：

谢谢！这是唯一真正有帮助的评论。

【解决方案3】：

尝试 !important 更改 CSS？在您可以编辑实际代码之前，这只是一个临时解决方案。

【讨论】：