Member Avatar for hyper_boom

Good morning,

I am working on a website that has 3 versions:

local
development
and the live site (say for example http://www.google.com)

As it can sometimes be confusing for testers which version they are on, I created (with help from this forum) a static footer for the bottom of your screen which tell you which version you are on:

<style>

* html #footer {
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight)); position:absolute;

}

* html {/* stop jitter by adding a 1px transparent gif to background of html*/
    background-image: url(image.jpg);
}

</style>

<script language="javascript">
	var loc = document.location.toString();
	loc = loc.split("//");
	var protocol = loc[0];
	loc = loc[1];
	var finalDisplay = protocol + "//" + loc.split("/")[0] + "/";
</script>

<div id="footer">You are using the<script language="javascript">

document.writeln(finalDisplay);

</script>version of this application</b> </div>

The java script picks up and displays the url at the bottom of the screen, but hides everything after a '/' i.e.:

http://localhost/

However this static footer can not be allowed to be seen on the live site.. Is there anything I can add that could disable to the footer?

  • 2 Contributors
  • 4 Replies
  • 179 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by hyper_boom

Dani AI

Generated

A few practical notes and safer alternatives that build on 's setup and 's URL-check idea.

Server-side is the cleanest solution: omit the banner entirely on production so it never reaches live users or caches. Example (PHP) — the banner is rendered only when the host is not the production host:

<?php
if ($_SERVER['HTTP_HOST'] !== 'live.example.com') {
?>
<div id="env-banner" role="status">Environment: <?= htmlspecialchars($_SERVER['HTTP_HOST']) ?></div>
<?php
}
?>

If server-side changes are not possible, prefer a modern client-side insertion instead of document.write. Create the element at runtime, use location.hostname (not a substring search) and location.origin for a canonical display, and append it to the DOM. This avoids timing issues and prevents accidental document replacement:

(function () {
  var prodHost = 'live.example.com';
  if (location.hostname !== prodHost) {
    var b = document.createElement('div');
    b.id = 'env-banner';
    b.setAttribute('role', 'status');
    b.textContent = location.origin + '/';
    b.style.cssText = 'position:fixed;left:0;right:0;bottom:0;background:#fff7c2;padding:6px;text-align:center;z-index:9999;font-size:12px;';
    document.body.appendChild(b);
  }
})();

Troubleshooting and cautions: avoid document.write (it is brittle and can overwrite the page if invoked after load). Use strict equality on location.hostname to prevent false positives from similar domains or subdomains. Test behind proxies/CDNs and with ports and HTTPS—location.origin and location.hostname behave predictably for those cases. Prefer removing the banner at build time (environment flag or NODE_ENV) when using modern toolchains so no accidental exposure occurs on the live site.

Recommended Answers

All 4 Replies

Member Avatar for Borzoi

You could use an if statement to check the URL. I assume your live version will have www. at the beginning. If not, replace it to whatever the start of the URL for the live site is.

<script language="javascript">
if (location.href.indexOf("www.google.com") == -1)
{
  document.write("<div id=\"footer\">You are using the ");
  document.writeln(finalDisplay);
  document.write(" version of this application</b> </div>";
}
</script>

This will execute the code if the page is NOT www.google.com so it should only show up on non-live pages. If you want the code to execute when it is www.google.com, change the "==" to "!="

Edited by Borzoi because: wrong [code] tag
Member Avatar for hyper_boom

Thank you Borzoi for the quick reply,

I updated the code and now it never displays.. This is what the code looks like in case I have misunderstood:

<style>

* html #footer {
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight)); position:absolute;

}

* html {/* stop jitter by adding a 1px transparent gif to background of html*/
    background-image: url(image.jpg);
}

</style>

<script language="javascript">
	var loc = document.location.toString();
	loc = loc.split("//");
	var protocol = loc[0];
	loc = loc[1];
	var finalDisplay = protocol + "//" + loc.split("/")[0] + "/";
</script>

<script language="javascript">
if (location.href.indexOf("www.google.com") == -1)
{
  document.write("<div id=\"footer\">You are using the ");
  document.writeln(finalDisplay);
  document.write(" version of this application</b> </div>";
}
</script>
Member Avatar for Borzoi

That was an error on my part, sorry. It's not liking that there are multiple lines of document.write so that will need to be modified.

Try this:

<script language="javascript">
if (location.href.indexOf("www.google.com") == -1)
{
  document.write("<div id=\"footer\">You are using the " , finalDisplay , " version of this application</b> </div>";
}
</script>
Member Avatar for hyper_boom

Excellent this seems to be working, I will do some more tests and come back to you

Thank you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.