Welcome to the MacNN Forums.

registered_user · Jan 26, 2005, 06:03 PM

I am trying to create a pop-up (hooray for pop-ups :/ ) without placing any javascript in my mark-up. And, I'm working in xhtml strict so I cannot just add in the target attribute.

The goal is to create a pop-up window that loads the href in the link -- without the original window also following the link.

That is:

I have a page called "My Awesome Page" with a link to http://apple.com
I have a script that tells this link to open a new window for it.
I click the link, the new window appears and loads Apple's site.
However, the original browser window that was displaying "My Awesome Page" also follows the link to Apple, and I don't want it to.

Does anyone know of a way, using the W3C DOM, to prevent both my original window from following the link?

Chris O'Brien · 06:45 PM

return false is correct.

Code:
//javascript:
function goTo(url) {
    window.open(url, '', '');
}

//html:
<a href="http://www.apple.com" onclick="goTo(this.href); return false">Click me</a>

Or something to that effect.

Edit (Just read the bit about no extra markup)
Instead of adding it to your code, use something like:

Code:
function init() {
    var links = document.getElementsByTagName("a");
    for (var i=0; i < links.length; i++) {
        links[i].addEventListener("click",
            function(e) {
                goTo(e.target.getAttribute("href"));
                e.preventDefault();
            }, true);
    }
}

window.onload = init

registered_user · Jan 26, 2005, 06:50 PM

That's one of the more normal ways of doing it, and it works.

However, that's precisely what I'm trying to avoid: including javascript in the markup. That includes using any onclick attributes.

I'd prefer to keep the mark-up plain jane to separate the behavior from the content.

So the real challenge of the situation is pull it off without using onclick.

I don't even know if it's possible, but I figure it's worth a shot.

Chris O'Brien · Jan 27, 2005, 05:33 AM

Originally posted by registered_user:
That's one of the more normal ways of doing it, and it works.

However, that's precisely what I'm trying to avoid: including javascript in the markup. That includes using any onclick attributes.

I'd prefer to keep the mark-up plain jane to separate the behavior from the content.

So the real challenge of the situation is pull it off without using onclick.

I don't even know if it's possible, but I figure it's worth a shot.

See my edit. You must've replied whilst I was writing it

m a d r a · 07:57 AM

i dunno if this is exactly what you want, but you can get new window popups which validate as XHTML 1 strict [in fact, i've a few on my site which validate as XHTML 1,1 strict - so nuh!

]

it does involve javascript [and the rel attribute], but if you keep your javascript in an external file and just reference that from every page you build, then making links open in a new window is almost as straightforward as using the old target="_blank" and you dinnae have to write any javascript in your markup

in your external javascript file [saved with extension .js ] put the following function:

Code:
function newwindowlinks() 
{ 
 if (!document.getElementsByTagName) return; 
 var anchors = document.getElementsByTagName("a"); 
for (var i=0; i<anchors.length; i++) 
{ 
var anchor = anchors; 
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "openinnewwindow") anchor.target = "_blank"; 
} 
} 
 window.onload = newwindowlinks;

then in the header of each of your XHTML pages link to your js file:

Code:
<head> ... <script type="text/javascript" src="whateveryoucalledit.js"></script> ... </head

now whenever you want a link to open in a new window, just use a rel attribute corresponding to the one the function acts on [in the above case it's called openinnewwindow and - hey presto! - your link will open in a new window and your page will still validate as strict XHTML:

Code:
<a href="http://www.somewebsiteorother.com" rel="openinnewwindow">why not go here instead</a>

PS - sorry about the "beginner's guide to external javascripts" i realise it's a bit of stating the obvious for you - but it thought i'd include it in case someone else with less JS experience wanted to try it

registered_user · Jan 27, 2005, 08:33 AM

Ah. I see it now, BlackBook, and I'm playing with it. Thank you! I didn't know about preventDefault(). I'm no expert on javascript either, I'll just admit that up front.

I copied your script in to a document with three links, and I added an alert inside function(e) to ensure that it attached itself properly to the links. It did. But it doesn't have any effect on the page's behavior. Any link I click is still followed.

I checked FF's Javascript Console, and it says that goTo is not defined, and I'm not sure exactly what's going on. I'm also looking at that function you put on with the event listener which takes the argument e. I'm assuming e stands for event, but does it require that I give it a value before passing it to the function? I suspect that's the root of the undefined issue, but I'm not really sure.

Thanks again for the help, it's very informative. I told myself I'd actually learn some javascript instead of my normal hack and slash approach, and I guess this is the first unofficial project.

madra, that's a fine alternative that looks like it ought to work, but I'm hoping to find a solution that doesn't sneak in the target attribute. The target attribute is deprecated, and while the validator will not see it because you're sneaking it in with javascript, it's not technically valid. But it works, so you're one up on me so far!

You could also adapt your script to seek out a certain class instead of a rel, but I suppose it isn't necessary.

registered_user · 08:59 AM

hmmm.... that's interesting...

I just removed the goTo bit, and it works fine in FireFox. I was investigating e's value with alert(e.eventPhase) and it is defined, and then I when I removed the goTo line, it began working in FF...

What is the goTo link meant to do?

edit: I'm just now learning about Safari's fussiness with preventDefault() joy.

Chris O'Brien · 09:37 AM

Ah right - if you look at my initial reply before I edited it, I wrote:

Code:
//java script:
function goTo(url) {
    window.open(url, '', '');
}

So goTo() is just a custom function I made to make the link open in a new window. You'll need to include that too...

Should've made myself clearer - sorry (I was drunk when I originally replied).

edit
To answer your questions about the event listener:
The argument e of the function I wrote to go with addEventListener does indeed represent the event object. That's the way addEventListener passes the current event over to the listener in order for it to be handled. That argument could be called anything you want - I just use e becuase it's short, and I'm a lazy student

With Win/IE you always have access to the event object (you'll see a tonne of scripts on the web with 'event.srcElement' in them, etc) - this is just another way of handling it.

Also - I only tested it with Firefox and not Safari as I was on my Linux box at the time, so I'm not sure if it'll work in Safari. I'll have a look in a bit.

registered_user · Jan 27, 2005, 09:44 AM

I see it now. I overlooked the goTo function you had there. I admit that I'm taking bits of pieces and adapting them to what I'm working with.

The Safari bug is peculiar You can do

alert(e.eventPhase + " " + e.cancelable);

And get the expected results (actually, sort of, FF and Safari show different bubbling phases), but they both show that the event is cancelable. But Safari then goes on to ignore the cancellation. Fun stuff. I googled it, and apparently others have the same issues.

Chris O'Brien · Jan 27, 2005, 10:17 AM

Hmm... This is strange.
What's weird is that Safari is the one reporting the right eventPhase (since we're using event capture in the listener, I would imagine it should be caught at 1 at most, and possibly 0 (the capturing phase). For some reason Firefox has it at 2: the bubbling phase).

It would appear that this is just a bug in Safari that you'll need to work around. m a d r a's way would be the easiest/best I should imagine. It's either that or go back to the intial way, but have JavaScript add it on for you...

Code:
function goTo(url) {
    window.open(url, '', '');
}

function init() {
    var links = document.getElementsByTagName("a");
    for (var i=0; i < links.length; i++) {
        links[i].setAttribute("onclick", "goTo(this.href); return false;");
    }
}

window.onload = init;

Phil Sherry · Jan 27, 2005, 10:34 AM

Originally posted by registered_user:
madra, that's a fine alternative that looks like it ought to work, but I'm hoping to find a solution that doesn't sneak in the target attribute. The target attribute is deprecated, and while the validator will not see it because you're sneaking it in with javascript, it's not technically valid. But it works, so you're one up on me so far! You could also adapt your script to seek out a certain class instead of a rel, but I suppose it isn't necessary.

eh, that Oirish bugger always sneaks in the back door with a cheap hack

registered_user · Jan 27, 2005, 01:51 PM

Originally posted by Black Book:
... It's either that or go back to the intial way, but have JavaScript add it on for you...

Heh, I had just started exploring that solution myself.

I had written

Code:
links[i].setAttribute('onclick','window.open(this.href,"newWindow"); return false;');

And it worked pretty well, if you overlook WinIE. So, I guess that is the next logical step.

I threw in a few alerts while crawling the a tags, and javascript properly sets the onclick attribute.

Then, I added onmouseover="alert(this.onclick);" to each link right in the markup, and again, IE reports the proper attribute for onclick. But sure enough, nothing pops when the link is clicked.

No wonder people hate on javascript so much.

registered_user · Feb 1, 2005, 03:48 PM

gratuitous bump.

So I figured I'd go a step further and write a script to add a little icon next to each link that is external. The icon will be a link that opens in a new window. It makes sense to me; both usability geeks and popup geeks are given a solution to their linking needs.

It works just dandy in FF and Safari, but it kills IE6. flatly. IE6 just hangs there and I think it's crying a little, but I'm not sure.

Now, here's the odd part. If, at the end of the script I do either of these lines (but not both) IE is fine. But as soon as I append both children, it kills IE.

s.appendChild(o);
s.appendChild(a);

I'm puzzled and amazed and confused. I also noticed that IE6 doesn't actually open the links in new windows when I only append the new window link.

Am I making any real glaring errors that anyone can see?

Code:
function iconLink() {
if (document.appendChild && document.replaceChild && document.getElementsByTagName && document.createElement) {
	var links = document.getElementsByTagName('a');
		for (var i = 0; i < links.length; i++) {
			//only alter links that have a different hostname and that haven't been already crawled.
			if(links[i].hostname != window.location.hostname && links[i].className.substring(0,7) != 'nocrawl') {
				//alert(links[i].hostname + " - " + window.location.hostname);
				//create a new span
				var s = document.createElement('span');
				//recreate the link
				var o = document.createElement('a');
					o.setAttribute('href', links[i].href);
					if(links[i].title != "") {
						o.setAttribute('title', links[i].title);
						} else {
						o.setAttribute('title', links[i].href);
						}
					o.setAttribute('class', 'nocrawl');
				//populate the o link with the text from the original link
					o.appendChild(links[i].firstChild);
					
				//create a new link
				var a = document.createElement('a');
					a.setAttribute('href', links[i].href);
					a.setAttribute('onclick', "window.open(this.href, 'newwin'); return false;");
					a.setAttribute('class', 'nocrawl newwin');
					a.setAttribute('title', 'Open this link in a New Window');
				//create a child of the link, the image
				var icon = document.createElement('img');
					icon.setAttribute('src', 'icon.gif');
					icon.setAttribute('alt', 'Open this link in a New Window');
	
				//compile the new span
				a.appendChild(icon);
				s.appendChild(o);
				s.appendChild(a);
	
				//replace original links
				links[i].parentNode.replaceChild(s, links[i]);
				
				}
					
		}
	}
}