Stopping URL from loading (from anchor)

S

saif

Hi all,

I realy need your help.

I have a page with different web links, now what I am trying to do is
whenever a user clicks on a link that link is captured using
event.target method. I'm using this to process that URL, but the real
part is stopping the document from loading that URL. I tried stop()
method but its not working. I also tried asigning current URL of the
document to the document's location but it failed to work.

Is there any workaround to stop the document from loading a URL.

I don't want to change the anchors. I just want to use that workaround
or method after calling event.target() method.

Thanks.
Any help is appreciated.
 
G

Guido Wesdorp

saif said:
Hi all,

I realy need your help.

I have a page with different web links, now what I am trying to do is
whenever a user clicks on a link that link is captured using
event.target method. I'm using this to process that URL, but the real
part is stopping the document from loading that URL. I tried stop()
method but its not working. I also tried asigning current URL of the
document to the document's location but it failed to work.

Is there any workaround to stop the document from loading a URL.

I don't want to change the anchors. I just want to use that workaround
or method after calling event.target() method.

Thanks.
Any help is appreciated.
Click to expand...

I guess what you want to do is use JavaScript to find all anchors in a
document (document.getElementsByTagName('a')) and put an onclick on
them, that does what you want it to do and also cancels the event
('event.preventDefault()' on Mozilla, 'event.returnValue = false' on IE).

Small example:

=======================================================================

function process_link_click(event) {
var link = event.target ? event.target : event.srcElement;
var href = link.getAttribute('href');
// do something with your href here
if (event.preventDefault) {
// mozilla
event.preventDefault();
} else {
event.returnValue = false;
};
};

function find_and_patch_links() {
var links = document.getElementsByTagName('a');
for (var i=0; i < links; i++) {
if (link.addEventListener) {
// mozilla
link.addEventListener('click', process_link_click, false);
} else if (link.attachEvent) {
// IE
link.attachEvent('onclick', process_link_click);
};
};
};

=======================================================================

You will have to make sure the find_and_patch_links() function is called
on load of the document (<body onload="find_and_patch_links()">). Note
that I haven't tested this code so it may contain a bug or two ;)

Cheers,

Guido
 
M

Michael Winter

[snip]
I guess what you want to do is use JavaScript to find all anchors in a
document (document.getElementsByTagName('a'))
Click to expand...

A more reliable approach is to use the document.links collection. It's
supported by more browsers.
and put an onclick on them, that does what you want it to do and also
cancels the event ('event.preventDefault()' on Mozilla,
'event.returnValue = false' on IE).
Click to expand...

If you use other approaches for attaching listeners (which I've added
below), returning false will suffice.

As we're attaching listeners directly to the A elements, one can simply
use the this operator to get a reference to the element.
function process_link_click(event) {
var link = event.target ? event.target : event.srcElement;
var href = link.getAttribute('href');
Click to expand...

Unless you're working with XML, link.href will do and is more reliable.
// do something with your href here
if (event.preventDefault) {
// mozilla
event.preventDefault();
} else {
event.returnValue = false;
};
};
Click to expand...

By the way, you don't usually need to terminate blocks with a semi-colon.
The only exceptions I can think of at the moment are with the function
operator

ref = function() {
};

and the object literal

obj = {};

Notice that the difference is due to the assignment which, as a statement,
should be terminated.
function find_and_patch_links() {
var links = document.getElementsByTagName('a');
Click to expand...

var links = documents.links;

is more compatible.
for (var i=0; i < links; i++) {
Click to expand...

That's an error. In any case, it's better to save the property value
rather than repeatedly looking it up:

for( var i = 0, n = links.length; i < n; ++i ) {
if (link.addEventListener) {
Click to expand...

This is also an error as 'link' is undefined.
// mozilla
link.addEventListener('click', process_link_click, false);
} else if (link.attachEvent) {
Click to expand...

Unfortunately, Microsoft's attachEvent() mechanism is flawed and doesn't
set the this operator correctly. As I'm adding support for older browsers
anyway, we'll skip attachEvent() and use the event properties with IE.
// IE
link.attachEvent('onclick', process_link_click);
};
};
};
Click to expand...

The culmination of which produces:

function process_link_click( event ) {
var href = this.href;
event = event || window.event;

// do something with your href here
// ...

if( event.preventDefault ) {
event.preventDefault();
}
return false;
}

function find_and_patch_links() {
var links = document.links, link;

for( var i = 0, n = links.length; i < n; ++i ) {
link = links[ i ];

if( link.addEventListener ) {
link.addEventListener( 'click', process_link_click, false );
} else {
link.onclick = process_link_click;
}
}
}

Mike
 
G

Guido Wesdorp

Michael said:
The culmination of which produces:

function process_link_click( event ) {
var href = this.href;
event = event || window.event;

// do something with your href here
// ...

if( event.preventDefault ) {
event.preventDefault();
}
return false;
}
Click to expand...
Are you sure 'return false;' is sufficient? I remember trying it but
with no avail, could be I was doing something wrong as well... I do know
it works when you define an event handler on an element (<a
onclick="return false;">) but not when using JavaScript to dynamically
attach them...
Anyway, thanks for fixing the bugs, and thanks for making it less
browser-specific. I write Mozilla/IE apps usually (check out Kupu,
kupu.oscom.org, for example), without having to care about older/other
browsers, so I don't know much about writing 'legacy' code...

Cheers,

Guido
 
M

Michael Winter

Are you sure 'return false;' is sufficient? I remember trying it but
with no avail, could be I was doing something wrong as well... I do know
it works when you define an event handler on an element (<a
onclick="return false;">) but not when using JavaScript to dynamically
attach them...
Click to expand...

Probably not with listeners added with addEventListener(), which is why I
left the preventDefault() call. Returning false isn't specified in DOM 2
Events, so it's probably not implemented and why should it? The legacy
argument doesn't apply there. However, returning false is sufficient for
the event properties as it is effectively the same as specifying the
intrinsic event in HTML. Using the returnValue property doesn't appear to
be necessary in IE with attachEvent() but it wouldn't hurt (I usually
avoid that mechanism like the plague, though).
Anyway, thanks for fixing the bugs, and thanks for making it less
browser-specific. I write Mozilla/IE apps usually (check out Kupu,
kupu.oscom.org, for example), without having to care about older/other
browsers, so I don't know much about writing 'legacy' code...
Click to expand...

You're welcome.

Mike
 
S

saif

Thanks Wesdorp, your code snippet really helped me.

This is what I was looking for:

if (event.preventDefault) {
// mozilla
event.preventDefault();
} else {
event.returnValue = false;
};

Surprisingly I didn't find any 'preventDefault' discription in
JavaScript documentation from Netscape.

Thanks again.
 
M

Michael Winter

Thanks Wesdorp, your code snippet really helped me.

This is what I was looking for:

if (event.preventDefault) {
// mozilla
event.preventDefault();
} else {
event.returnValue = false;
};

Surprisingly I didn't find any 'preventDefault' discription in
JavaScript documentation from Netscape.
Click to expand...

That's because it's part of the World Wide Web Consortium's (W3C) Document
Object Model (DOM). Specifically, DOM Level 2 Events. The DOM home is here:

<URL:http://www.w3.org/DOM/>

The Technical Reports section contains the various specifications. It's
best to avoid Level 3 for now as most browsers don't implement it.

<URL:http://www.w3.org/DOM/DOMTR/>

Mike
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

HTML Anchor tag not working 2
Changing .html in URL 3
Loading 4
CORS/Express: Getting data from server from domain html 2
Loading modules from files through C++ 0
Random winners from .csv 0
Remove hidden from only hovered element 1
How to display input options only after selecting an option from the 'select class' tag JS? 6

Members online

Total: 27 (members: 2, guests: 25)
Robots: 504

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top