Here at this little blog ... and for a while now ... links to other sites have opened in a new window. Links to other pages on this site have opened in the same window.
Why would I do such a thing? Easy. I'm selfish.
Keeping You Here
Let's say I write a post that offers supporting evidence on, say, CNN. I'll offer a link. If you're in the middle of my post and click on the CNN link, if it opens in the same window, I might lose you. And I don't want you to leave here. Suppose you read the article and decide you want more. You might not come back to my site and hear what words of wisdom I was talking about. However, if the CNN link opens in a new window, you can read it to your heart's content and my site is still there. I you don't want to finish my post, close the window.
Now, I will say that I do not like it when I click a link a new window opens on the same site! I'm not counting forms or larger images, but full pages. I don't like it when that happens. And I strive to make sure it doesn't happen here. If you find it happening here, let me know. I'll fix it. And I'll be more careful in the future.
But You Have A Point
Having said all that, I do understand that some still don't like it. They insist that the reader can open in a new window by using a mouse-click shortcut. An informal survey of casual readers (most readers, I think) don't know those shortcuts.
But giving the user the option is a valid argument. And I concede. You win.
And I have solved it in a way you might like. Or you might not. Some will still get their panties in a wad over it. Some will say "Good for you, it's not for me." Others might even like the idea.
Your Choice
If you look near the top of the left-hand column, you'll see that you have the option to set the default target window for links. If you don't set it, the default is still a new window, like it's always been here. However, you can override it by choosing the option to "Set default target to: this window." And, if you find you prefer it the original way (a new window), you can set it back.
Today, we're going to talk about how I'm implementing the reader option.
Cookies!
We're going to use cookies to do this. Now, some people don't like cookies. Okay. Fine. Develop your own process, if you're a blogger. If you're a visitor and have cookies turned off, then this feature won't work for you. In other words, it will work like it alway has. So you're not losing any functionality; you're just not gaining the new. If, on the other hand, you don't block cookies, and you have JavaScript enabled, it'll work for you just fine.
Writing Cookies
You'll need to use a script that writes cookies. Here's one I stole from Macromedia's Dreamweaver extensions. Be sure to add this to every template in the <HEAD> section. If you use Blogger, you only need to add it to the one template. If you use TypePad, MovableType, or another platform that uses multiple templates, you'll need to add this to all your page templates.
// Example:
// writeCookie("myCookie", "my name", 24);
// Stores the string "my name" in the cookie
// "myCookie" which expires after 24 hours.
function writeCookie(name, value, hours) {
var expire = "";
if(hours != null) {
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
}Either wrap this inside
<script type="text/javascript"> <!--
and
//--> </script>
or include it in an external file
<script type="text/JavaScript" src="/cookies.js"></script>
if your blogging setup allows you to create external files like this. This example assumes it's in your blog's root directory.
Reading Cookies
Just because you wrote a cookie, you're not done with cookies. You got to be able to read the cookie. And here's JavaScript that allows you to do that. Again, I stole it from Macromedia's Dreamweaver extensions.
// Example:
// alert( readCookie("myCookie") );
function readCookie(name) {
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}Like the writeCookie function, include it in the <HEAD>. You can either have it in the same
<script type="text/javascript">
section or in the same external files ("cookie.js") as before.
These can be used for more than just this tip I'm offering. If you want to use cookies for other things, this should work. So, YAAYYYY! A general Website tip!
Setting The Default Link Window
Now that you have the ability to read and write cookies, let's set your default link window. Remember, my default is to open in a new window. You might want a different default. We'll cover that.
First, there's another piece of JavaScript that you need to include in the <HEAD> of your templates. Remember, all JavaScript is wrapped in the <SCRIPT> tags or in an external file and read in by a <SCRIPT> tag. Just like the cooke functions.
Here's the next piece of JavaScript you need:
<script type="text/javascript">
<!--
function setTarget(val) {
if (val==null || val=="" || val==0) {
val="";
} else {
val=1;
}
writeCookie("defTarget",val);
var thisURL=window.location.href;
location.href=thisURL;
}
//-->
</script>The function setTarget will be used later. But it should be in the <HEAD> section. That's good Webpage form to do that. It also ensures that it gets read by your browser before the JavaScript call that uses it. Trust me on this. The explanation is a whole other post.
But here's what the setTarget function does. When you call it (remember, that happens later), it will set the cookie to the value you want with the writeCookie("defTarget",val) line. The next two lines then refresh your page which changes the default. Again, we'll actually use the function later. But that's what it will do.
Also, in the same section of <SCRIPT> you should also have:
if ( readCookie("defTarget")!=1 ) {
document.write("<base target='_blank' />");
}This if statement uses the readCookie function to determine if the cookie "defTarget" is set to the override value. If it is not set to the override value, the document.write command is executed, which sets your default.
My default is to open in a new window, and the visitor override sets it to the same window. If your default is to open in the same window, and you want the visitor override to open in a new window, you'll need to change this section of code to read
if ( readCookie("defTarget")==1 ) {
document.write("<base target='_blank' />");
}instead. See the difference? For default to be new window,
readCookie("defTarget")==1For default to be same window,
readCookie("defTarget")==1This is critical, so be sure to get it right.
What If JavaScript Doesn't Work?
Some visitors might have JavaScript disabled. For them, this whole process won't work. Most people (over 99%) who visit this little blog don't disable JavaScript, so it'll work for almost everyone. But you have to keep those in mind, if possible. That's where this next piece comes in:
<noscript> <base target="_blank" /> </noscript>
It goes immediately after the previous piece. If the visitor has JavaScript disabled, this section will execute. And it contains the default that I use here: links open in a new window. If you choose to have new links open in the same window by default, you can skip this <NOSCRIPT> section entirely.
Where's The Visitor Option?
Finally, we're ready to give the visitor the option of setting the default window. Wherever you want this to appear, add this to your template(s):
<p>Most links are set to open in <strong>
<script type="text/javascript">
if ( readCookie("defTarget")==1 ) {
document.write("the same");
} else {
document.write("a new");
}
</script>That piece can go wherever you want. On this little blog, it's near the top of the page, in one of the columns. All it does is notify the visitor what the current setting is. Whether your default is a new window (like here) or the same window (like most places), use the script as it its here. If you want to change the wording, that's just fine. Nothing is dependent on the wording of the text, just the code.
For the visitors that disable JavaScript, enclose this piece immediately after:
<noscript> a new </noscript> </strong> window. </p>
You'll want to change "a new" to "the same" if that is your default.
So, now you've told them the current setting. Here's the piece of code that lets them change it:
<p>Set default target to: <ul> <li> <a href="javascript:setTarget(0)" target="_self"> a new window </a></li> <li> <a href="javascript:setTarget(1)" target="_self"> this window </a></li> </ul></p>
Word it however suits you. But that's the functionality.
Oh, Is That All?
Actually, yes. That's it. And, yes, it's a little long and drawn out. This can be done a lot easier with PHP, ASP, or ColdFusion, but, if you don't have access to that, or of you don't feel comfortable doing that, then this JavaScript functionality will work for 99% of your visitors.
Oh, and there may be shorter JavaScript methods. If you can do it in a shorter, easier method, well you didn't need to read this. But, if you do, write a post about it, link to this post and TrackBack.
This might not satisfy everyone, for a couple of reasons. One is that some (not all, but some) who know mouse shortcuts seem to not have patience for those that don't. Also, this will only work for links that don't have a target="_blank" or target="_self" set at the link itself. Targets on the link override page defaults.
But for links that rely on the page target (and that's most links), this should work just fine.
Thanks BASIL! I've been wanting to do this on my site. Now I will.
ReplyDeleteI have links open in a new window because I assume visitors prefer that, but I would rather give them the option.
I had a more cynical view of why (it seems) most bloggers open links in the same window: when the visitor returns to finish reading the blog gets another visit/pageview. Whereas on your site (old version) and mine, we only get the one.
I bet it's far more benign than that - a default setting they never changed...