Aescula Aescula - 1 month ago 12
HTML Question

Redirect based on query string

I'm hosting some things on a home server, but my IP address often changes. I don't have a domain name, so I can't just give people something to bookmark. To fix this, I made a small Perl script that spits out an HTML file into DropBox, so I can let people bookmark that. I know, that's not the best solution, but it seems to be working so far.

The issue is, I'd like to make it nicer. What I want to do is have an optional query string, like ?path=wiki or something, and when it actually loads with that, it'll automatically redirect you to http://(my_ip)/wiki

Unfortunately I don't even know how to make a redirect happen, and haven't seen anyone who's got this answer. Especially an optional, dynamic one like that, although it should be simple if I understand it right.

Answer Source

purely in html i don't see it happening

but you could do it with javascript, if you anyhow spit out a custom html page, you could replace the ipadres of the targetUrl in the example below

<!DOCTYPE html>
<html>
<head>
  <title>Test redirect</title>
  <script type="text/javascript">
  var targetUrl = 'http://127.0.0.1';

  function querystring(paramName) {
    var url = document.location.href, params, param, i, reply = {}, name, value;
    if (url.indexOf('?') < 0) {
      return null;
    }
    params = url.split('?')[1].split('&');
    for (i = 0; i < params.length; i++) {
      param = params[i].split('=');
      name = (param[0] || '').toLowerCase();
      value = param[1] || '';
      if (typeof paramName === 'undefined' || paramName.toLowerCase() === name) {
        if (typeof reply[name] !== 'undefined') {
          if (typeof reply[name] === 'string') {
            reply[name] = [ reply[name], value ];
          } else {
            reply[name].push(value);
          }
          continue;
        }
        reply[name] = value;
      }
    }
    return reply;
  }

  function redirect() {
   var path = querystring('path');
   if (path === null || typeof path.path === 'undefined' || typeof path.path !== 'string')     {
    document.location.href = targetUrl;
   } else {
    document.location.href = targetUrl + '/' + path.path;
   }
  }
  </script>
</head>
<body onload="javascript:redirect()">
<h1>Redirecting to homesite</h1>
<p>You are being redirected, please wait while the page is loading!</p>
</body>
</html>

in this case, if a querystring parameter of ?path=wiki is there, it would redirect it to your targetUrl and add the path /wiki to it

UPDATE

Update to use hyenahome.html#path:wiki rather than hyenahome.html?path=wiki

<!DOCTYPE html>
<html>
<head>
  <title>Test redirect</title>
  <script type="text/javascript">
  var targetUrl = 'http://127.0.0.1';

  function querystring(paramName) {
    var url = document.location.href, params, param, i, reply = {}, name, value;
    if (url.indexOf('#') < 0) {
      return null;
    }
    params = url.split('#')[1].split('&');
    for (i = 0; i < params.length; i++) {
      param = params[i].split(':');
      name = (param[0] || '').toLowerCase();
      value = param[1] || '';
      if (typeof paramName === 'undefined' || paramName.toLowerCase() === name) {
        if (typeof reply[name] !== 'undefined') {
          if (typeof reply[name] === 'string') {
            reply[name] = [ reply[name], value ];
          } else {
            reply[name].push(value);
          }
          continue;
        }
        reply[name] = value;
      }
    }
    return reply;
  }

  function redirect() {
   var path = querystring('path');
   if (path === null || typeof path.path === 'undefined' || typeof path.path !== 'string')     {
    return;
   } else {
    document.location.href = targetUrl + '/' + path.path;
   }
  }
  </script>
</head>
<body onload="javascript:redirect()">
<h1>Redirecting to homesite</h1>
<p>You are being redirected, please wait while the page is loading!</p>
</body>
</html>