Retargetting Selected Links With JavaScript

At work I have a new site that makes use of iframes to embed external content onto a page. The content is a blog, written by non technical members of staff who needed to be able to include links to external websites. They are happy with using <a href=" tags, but I didn’t want to worry them with target parameters in the HTML. We have to target _blank as we want the readers to keep the old site open and not open the content in the site framework.

The solution to this is to use a bit of JavaScript to manipulate the DOM and insert blank targeting to all blog entries.

As we control the HTML template of the blog, we made sure all the blog entries were wrapped by an enclosing div tag with a class called blogentry.

Here’s some example HTML. We have one link in the blogentry div we need to re target. The other link is not in a blogentry so has to be ignored.

<div class="blogentry">
<a href="http://www.robertprice.co.uk/">This link needs to open in a new window</a>.
</div>
<div>
<a href="http://www.robertprice.co.uk/">This link won't open in a new window</a>.
</div>

The JavaScript first has to get all div tags on the page. It does this by calling getElementsByTagName on the document. Once we have all the div tags, we have to iterate over them to make sure we only get the ones with the classname of blog entry.

var entries = document.getElementsByTagName('div');
for (var i in entries) {
if (entries[i].className == "blogentry") {
// insert target code here.
}
}

Now have our blogentry’s we need to find all the links inside and make sure they all target blank. We do this by calling getElementsByTagName on each node, then setting the target attribute to blank.

var targets = entries[i].getElementsByTagName('a');
for (var j in targets) {
targets[j].target="blank";
}

It’s as simple as that. The full code follows…

<script language="JavaScript" type="text/javascript">
<!--
var entries = document.getElementsByTagName('div');
for (var i in entries) {
if (entries[i].className == "blogentry") {
var targets = entries[i].getElementsByTagName('a');
for (var j in targets) {
targets[j].target="blank";
}
}
}
// -->
</script>

Framing Pages With JavaScript

Normally, when building a website, we’d not want our content to be in frames.

However, a project at work involved hosting some content externally from the parent site that was framed in the parent site.

That’s fine, nothing to difficult, but this content also provided an RSS feed and those links had to feed back into the parent page, so needed to launch the site framework around itself if it didn’t already exist.

The solution to this was to be have two JavaScript’s, one in the piece of content, and the other in the parent framework. When the content is loaded it needs to check if it’s framed, and if it’s not to load the parent framework which then needs to reload the content.

Here’s the code that goes into the content…

<script language="JavaScript" type="text/javascript">
if (self == top) {
var newurl = "http://www.myparentsite.com/?url=" + encodeURI(window.location.href);
if (document.images) {
top.location.replace(newurl);
} else {
top.location.href = newurl;
}
}
</script>

So what’s going on here? Well firstly we need to check if the content page has been launched in a frameset or not. To do this we check if self is the same as top. self is a JavaScript object that refers to the current page, and top is a JavaScript object that refers to the top of the current page, so this could be the parent page of multiple framesets. If it’s the same we know we’re at the top of the page and not in a frameset, so we need to launch the parent page architecture. To do this we work out what the URL of a parent will be and get JavaScript to tell the browser to goto to that page. If you look at the code here, you’ll see the parent site I’ve called www.myparentsite.com, but this could be anything. I append a parameter called url that is an encoded version of the current page’s URL.

When our parent page loads, it needs to see if it has a URL parameter to load in the content frame correctly. We use the following code on the parent page to achieve this.

<script language="JavaScript" type="text/javascript">
var newurl = decodeURI(location.search.slice(5));
if (newurl) {
// nothing actually :-)
} else {
newurl = "http://www.framedcontent.com/defaultcontent.html";
}
document.write('<iframe src="' + newurl + '" scrolling="no" width="492" height="680" frameborder="0" ></iframe>')
</script>

All we’re doing here is getting a whatever parameter string is passed in and treating it as a URL. If we don’t have a parameter we use a default. We then create a new iframe referring to this URL.

As you can see we make no effort to check the parameter passed in is a valid URL or even if it’s in the url parameter. This is very bad code, but serves to demonstrate the technique. In real life we’d check for the url parameter and that it is valid.

Comparing Email Addresses In JavaScript

I needed to write a quick JavaScript that could check if two email addresses were the same or not today. As it’s so simple, I thought I’d share it.

Firstly we put the following JavaScript into a script tag.

function compareEmails(myForm) {
  if (myForm.email.value != myForm.email2.value) {
    alert("Your email addresses don't match. Please double check");
    return false;
  } else {
    return true;
  }
}

It takes a form, and compares the values of the fields called email and email2. If they are the same it returns true which lets the form submit normally.

However, if email and email2 are different it brings up an alert box telling our submitter the values are different, and returns false. Returning false means the script won’t submit to the script specified in the action parameter so the user has to confirm their email address again.

The following HTML code gives an example of the scripts use.

<form action="dosomething.pl" onSubmit="compareEmails(this);">
Email :<input type="text" name="email" /> <br />
Verify Email: <input type="text" name="email2" /> <br />
<input type="submit" />
</form>

Of course the code can be used to compare any fields and not just email addresses. All you need to do is to change the field names in the JavaScript.

Enjoy!