title: BASE HREF, javascript, and Internet Explorer vs. Firefox
body: <p><strong>Question:</strong></p>
  
  <p>IE and Firefox / Safari seem to deal differently with BASE HREF and Javascript window.location type requests. First, is this an accurate description of the problem? What's going on? And what's the best cross-browser solution to deal with this situation?</p>
  
  <p><strong>Context:</strong></p>
  
  <p>I have a small PHP flat file sitelet (it's actually a usability testing prototype). </p>
  
  <p>I dynamically generate the BASE tag's HREF value in PHP, i.e. if it's running on our company's server, it's:</p>
  
  <pre><code>$basehref = 'http://www.example.com/alpha/bravo/UsabilityTest/';
  </code></pre>
  
  <p>and on my local dev machine, it's:</p>
  
  <pre><code>$basehref = 'http://ellen.local/delta/echo/foxtrot/UsabilityTest/';    
  </code></pre>
  
  <p>For one of the tasks, I collect some user input, do some transformations on it in Javascript, and send to the server using code like this:</p>
  
  <pre><code>function allDone() {
      // elided code for simplicity of stackoverflow question
      var URI = "ProcessUserInput.php?";
      URI = URI + "alphakeys=" + encodeURI( keys.join(",") );
      URI = URI + "&amp;sortedvalues=" + encodeURI( values.join(",") );
      window.location = URI;
  }
  </code></pre>
  
  <p>Both the javascript file (containing function <strong>allDone()</strong>) and the processing PHP script (<strong>ProcessUserInput.php</strong>) live in a subdirectory of UsabilityTest. In other words, their actual URL is </p>
  
  <p><a href="http://www.example.com/alpha/bravo/UsabilityTest/" rel="nofollow noreferrer">http://www.example.com/alpha/bravo/UsabilityTest/</a><strong>foxtrot/ProcessUserInput.php</strong>
      aka </p>
  
  <p><code>$basehref . '/foxtrot/ProcessUserInput.php'</code></p>
  
  <p><strong>The Problem</strong></p>
  
  <p>IE's JavaScript basically seems to ignore the BASE HREF. The javascript and the PHP processor live in the same directory, so the call to <strong>ProcessUserInput.php</strong> works out fine. The input gets processed and everything works fine.</p>
  
  <p>But when I test on Firefox, the JavaScript <em>does</em> appear to use the BASE HREF, because the script's output gets sent to </p>
  
  <pre><code>$basehref . '/ProcessUserInput.php'
  </code></pre>
  
  <p>This breaks, because <strong>ProcessUserInput.php</strong> is in a subdirectory of basehref. However, if I add the subdirectory name to the javascript, it no longer works in IE.</p>
  
  <p><strong>Solutions?</strong></p>
  
  <p>I can think of a few ways to solve this:</p>
  
  <ul>
  <li>In Javascript, read the HREF property of the BASE tag and manually prepend to <code>var URI</code> in the javascript, calling a fully-resolved absolute URL</li>
  <li>Process the <strong>.js</strong> file with PHP and insert the <code>$basehref</code> variable into the script</li>
  <li>Move the files around</li>
  <li>Something else?</li>
  </ul>
  
  <p>I'm sure there must be other ways to solve this too. What's the best way to deal with BASE HREF in JavaScript when IE and Firefox apply it differently in JavaScript?</p>