PDA

View Full Version : Getting and Setting Base URL

Daybreak0
12-30-2009, 10:54 PM
Hi I am using a generic Template in a site where different domain names may enter at different levels of a web site.

By using some CSS in my <header> to set the base url.
<base href="http://www.MyDomain.com">
I am able to refer to the address of an image by just having
<img src= "/images/photo1.jpg">
which will display the image
http://www.MyDomain.com/images/photo1.jpg

By changing the BASE URL I am able to change which image will display.

So I need to obtain the URL address that the viewer, came into the web site on, and then set the BASE URL.

I have managed to find the following code

This code obtains the URL (placed in the header)


<script type="text/javascript"> function writeDomain()
{ var myDomain = document.domain; document.write(myDomain);}</script>

and this code would write the URL address in the body
<script type="text/javascript">writeDomain()</script>

Then I found the following script which actually sets the BASE URL.
<script type="text/javascript">
function setbasehref(basehref) {
var thebase = document.getElementsByTagName("base");
thebase[0].href = basehref;
} </script>

and then the following call which would be used to actually set the BASE Url.
<script>setbasehref('http://www.mydomain.com/');</script>

So I thought- I have the code to egt the URL and I have the code to set the BASE URL, will this work -
<script>setbasehref(writeDomain());</script>

Which just goes to show I have no Javascript knowledge at all.

As per above I am trying to retrieve the current URL and then set the BASE URL to Current URL.

There maybe even a simpler way to write it than the convulted adding together, but any help appreciated.

Thank you
John
Arbitrator
01-01-2010, 03:39 AM
There maybe even a simpler way to write it than the convulted adding together, but any help appreciated.I wrote a demo for this and, based upon it, it seems that Firefox doesn't support dynamically changing a base URI. The demo works in Google Chrome 4, IE8, Opera 10.1, and Safari 4 though.

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Demo</title>
<base href="http://www.jsgp.us/">
<script defer>
var d = document;
d.getElementsByTagName("base")[0].setAttribute("href", "http://www.google.com/");
</script>
</head>
<body>
<p>Try googling at <a href="../">Google</a>!</p>
</body>
</html>
Daybreak0
01-01-2010, 09:21 AM
Thanks Arbitrator

The code you propose does not seem to get the current URL first. The problem is I dont know the current URL.

Hmmm Will have to look at the Firefox problem. The other code I have does the same thing as yours, but calls the code within the 'Body' not within the 'Header'. Not sure if that makes a diffference.
Arbitrator
01-02-2010, 05:24 AM
The code you propose does not seem to get the current URL first. The problem is I dont know the current URL.It wasn't clear to me what you needed that information for, but here's a go:

If you want to get the current base URI, you can do that using document.getElementsByTagName("base")[0].getAttribute("href"). That code assumes that the relevant base element is the first (or only) occurrence of that element (there should only be one per document anyway) and that the relevant base element indeed has a href attribute. (If you need to test for cases that are otherwise (i.e., multiple base elements or base elements without href attributes), things will get a bit more complex.) To insert it into the document, you would use something like:

var myScript = function () {
var d = document;
var p_element = d.createElement("p");
p_element.appendChild(d.createTextNode("The current document’s base URI is " + document.getElementsByTagName("base")[0].getAttribute("href") + "."));
d.body.appendChild(p_element));
}

(FYI: document.getElementsByTagName("base")[0].getAttribute("href") can have the getAttribute("href") part abbreviated to href or the [0] part expanded to .item(0).)

If you just want to get the current URI, then you can use document.URL. To insert it into the document, you would use something like:

var myScript = function () {
var d = document;
var p_element = d.createElement("p");
p_element.appendChild(d.createTextNode("The current document’s URI is " + d.URL + "."));
d.body.appendChild(p_element));
}

The process is the same if you just want the domain portion of the URI; use document.domain in place of document.URL in the above code.

The outer function part is needed if you put the script into the document's head element since you want to run the script after the body element has already been downloaded (otherwise, the script will run immediately and fail because it inserts content into the body element and that element needs to exist before you can insert content into it). To run the script after the page has fully loaded, you can modify the body element's start tag so it looks like so:

<body onload="myScript();">

Hmmm Will have to look at the Firefox problem.That's a pretty serious problem given Firefox's market share. You can get around it though by doing a find-and-replace operation on all of the URIs. How complex the code for that will be depends upon the document.

The other code I have does the same thing as yours, but calls the code within the 'Body' not within the 'Header'. Not sure if that makes a diffference.The main difference is that some elements may or may not exist yet depending upon where you put the script in the source code. The head element is the preferred place to put linked files such as scripts; however, the caveat is that you need to delay the script's loading so that it doesn't run before necessary elements have been downloaded. Plus, you can't use document.write within the head element to write body element-only content (document.write is bad practice anyway).

The easier way to delay the script loading is to use the defer attribute: <script defer="defer"> (XHTML and HTML) or <script defer> (HTML only). Just keep in mind that non-IE browsers only added support for this attribute relatively recently.