How can I show content on a page based on query string?

Question

I'm working with a team that is using a vendor's web based application. When people log out, they are redirected to the login page, where we would like to add a message. We don't have access to change the code (it's cloud hosted) but we can pass a query string parameter in the URL.

We can do something like:

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

From there, I'd like to display a message in an h2 or something.

We can customize the HTML, CSS and JS of the page, but we don't have access to the source of the application (otherwise I would do this in PHP).

I presume I can use JS to change some CSS, but in all my trials I cannot get the CSS to actually change.

Please add some code snippet that you are trying to make it work. So that we understand where you are stuck exactly. — Misam, Aug 19 '16 at 07:21

score 2 · Answer 1 · edited May 23 '17 at 12:25

2

Check this answer: 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
}

edited May 23 '17 at 12:25

Community

1
1

answered Aug 19 '16 at 07:22

Marek Skiba

2,124
1
28
31

score 1 · Answer 2 · answered Aug 19 '16 at 08:08

From your question above, I am just understanding that you need a piece of code to show some message on your login page on the basis of the query string received.Following is the piece of code you can add in the footer of your login page html(as you have the access to 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>

Then change the link of login page like this:

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

Note :Read the code comments carefully to edit the code as per your html structure.

Thanks! This was the only comment that actually helped. – Alistair Aug 19 '16 at 21:18 — Alistair, Aug 19 '16 at 21:18

score 0 · Answer 3 · answered Aug 19 '16 at 07:17

0

Try !important to change CSS? Just a temporary solution until you can edit the actual code.

answered Aug 19 '16 at 07:17

Darrennchan8

192
4
8

How can I show content on a page based on query string?

3 Answers3