cancel load page in javascript
I define a link <a href="http://www.example.com">Hello</a>.when i click this link javascript should check the link is exist/valid.if true,the page sh开发者_JAVA技巧ould be load or the page should resirect to another page.i am using javascript ajax to check the page exist/not.i am using the condition xmlhttp.status == 200.But it is not working.here is the code:
function check(url){
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if (xmlHttp.status==200)
{
alert("Page Available");
}
else
{
window.location.href= "http://www.hello.com";
}
}
}
xmlHttp.send(null);
}
</script>
</head>
<body>
<a href="http://www.example.com" onclick="check(this)">Click this Link</a>
here xmlHttp.status==200 is not working.can anyone help me?
Okay, multiple points:
onclick="check(this)"doesn't pass the URL to thecheckfunction but a reference to the the link object. So if you want to pass the URL, you have to reference thehrefattribute.- You shouldn't set
window.location.hrefwhen you want to output something else afterwards. Setting the current location can make the browser change the page directly, so thealertprobably won't change. - Why the
ifwhere you change the location to google each time? - You can only abort the processing of link click, by returning
falsein the event handler. - AJAX calls are, as the first parameter says, asynchronous. But as you abort the page loading already (by clicking on the link), the AJAX call gets aborted.
- You can't return
falsefrom inside of the AJAX event handler (onreadystatechange) to stop the processing of the link. By the time you get there, the link is already processed. - That, what you are trying, is not really good. It should be up to the user to check if a page exists or not. It would be very wrong to redirect him to some other page (here: google) just because the link didn't work; at least I would be very confused. Also by checking that with AJAX, you make the user load the page twice, which is bad as well.
Browsers won't allow you to make a cross domain request.
See more details here, here and here.
Your onclick attribute should contain:
check(this.href);
You are not passing the url. You are passing the DOM element of the link. You need to use url.href or in jQuery you need to use $(this).attr('href').
Also the JavaScript is not preventing the link from being followed. You need to have the function return false, and have no errors before it does or you can use jQuery and event.preventDefault().
Finally even if you did all because of the same origin policy it will only work for links on the same domain you're on. Here is a link to a jQuery version of your code.
- Has to be from the same domain or the domain has to use CORS for safari 4 and Fx 3.5+
- you need to return false on the click
- you need to use the url.href
- you need to alert before you redirect
function check(link){
/* ONLY works from same domain OR if the target implemented CORS! */
xmlHttp.open("GET", link.href, true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if (xmlHttp.status==200)
{
alert("Page Available");
}
else
{
window.location.href= "http://www.hello.com";
}
}
}
xmlHttp.send(null);
return false; // imperative
}
</script>
</head>
<body>
<a href="http://www.example.com" onclick="return check(this)">Click this Link</a>
Ok you are nearly there. A lot of useful comments so far. But it might be better to redirect from the server not from the client. I personally would pass parameter to a function on your server (your server script's url) (capturing the href using jQuery) to a function on your server, then use that passed url to do a (head) check and redirect them via the server if it exists. If the site doesn't exist, then don't redirect and just send JSON back to the client and let them know the site doesn't exist.
加载中,请稍侯......
精彩评论