Can I wrap a try/catch around the opening of a URL in mobile safari? I know the question has been asked a number of different ways but essentially what I'm after is the trapping of bad URLs or the detection of when a specific URL cannot be opened by the browser.
If the URL is within the same domain, then you can use an XMLHttpRequest to determine if it returns a valid response.
e.g
var xhr = new XMLHttpRequest();
function handler(){
if (xhr.readyState != 4) { return; }
if (xhr.status != 200) { return "THIS IS A BAD LINK"}
}
if (xhr != null) {
xhr.open("GET", URL_YOU_ARE_TESTING, true);
xhr.send();
xhr.onreadystatechange = handler;
}
However this won't work for links to other sites (which is what I guess you want) due to the browser's same origin policy. I don't believe there is a javascript solution for this case.
Related
I've a tried a lot of things to check the internet connection of the users of my app. My first researches brought me to the navigator.onLine method. It works sometimes. But sometimes it doesn't. Of course it's not new, I have seen multiples people complaining about that.
Then I tried the XHR request. It was working on every devices, whatever the internet navigator (not like the previous method). But I got some warnings from Chrome and Firefox cos it was synchronous and may slow the whole app.
So I converted my function to an asynchronous function :
function verification() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "//" + window.location.hostname + "/ressources/favicon.ico?rand=" + Date.now(), true);
xhr.onload = function (e) {
if (xhr.readyState === 4 && xhr.status === 200) {
reconnection();
}
};
xhr.onerror = function (e) {
deconnexion();
};
xhr.send(null);
}
The idea is simple, I check if I can access to the favicon (with a rand to make it unique and avoid cache ressource). If the request is a success then I consider I'm connected. If not, I'm not connected. So far, it seems to work pretty well.
My question is : is it the best way to do that with pure JS ? Or should I maybe consider using fetch ? Or is there a better way I didn't find ?
I would like to know if it is possible in JavaScript to access to a given URL without opening its web page in a browser . Actually, what I'm really trying to do is parsing through a page (given its URL) and clicking on the first link that it contains without even opening that web page in my browser. Is that doable with JavaScript. In case it is, how should I do that? What function (or functions) should I use? In case it is not, what would the alternative solutions be?
What you need is to make an HTTP request to the URL and process the results. You can do that in JavaScript using the XMLHttpRequest object. Example:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("GET", "put_the_URL_here", true);
xhttp.send();
However, it is easier to use a library like jQuery.Ajax for that:
$.ajax({
url: "put_the_URL_here",
context: document.body
}).success(function(data) {
console.log(data);
});
For this to work, the URL that you're trying to access must have CORS enabled.
i have been trying very unsuccessfully to download a binary file from my server using jquery-ajax, which i finally gave up. so now i am trying to use XMLHttpRequest instead. however, i cannot even get a simple example working.
strangely enough, this code does not appear to do anything. i copy/pasted this from w3schools and this example is near identical to many other examples. it does not work for me in either chrome or FF:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the document is read;
}
};
xhttp.open("GET", '/blah/blah/output.png', true);
xhttp.send();
we go into the onreadystatechange function only once, on the open() statement with an xhttp.readyState equal to one, but not on the send() step. i should think it would at least throw some kind of error rather than do nothing at all.
also, as an experiment, i purposely fed the open() a bad url - but again no reply.
can anybody tell me what i might be doing wrong?
thank you very much.
Your code looks correct to me, which points to some external cause.
Is your code flowing all the way through to the end of the execution context? Browsers will hold onto network requests until the engine yields back to the browser.
For instance:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the document is read;
}
};
xhttp.open("GET", '/blah/blah/output.png', true);
xhttp.send();
while(true){}
will never send the call.
I started writing some code for this and have ran into this exception in the console:
"No 'Access-Control-Allow-Origin' header is present on the requested resource."
I came here to ask if I should continue trying or if this is even possible. I am aware that you can also use an iFrame but from looking at other posts you cant pull cookies out of the site an iFrame points to.
The only JS ive written thus far for the extension:
(function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 || xmlhttp.status == 200) {
console.log(xmlhttp.getResponseHeader('Set-Cookie'));
var response = xmlhttp.getResponseHeader('Set-Cookie');
}
}
xmlhttp.open("GET", "https://www.cars.com/profile/global/user-summary/",
true);
xmlhttp.send();
})()
Currently working on a project where we get a bunch of image over AJAX.
We do quite a lot of these, and it seems that IE11 seems to lose quite a few of them.
We get the image, call "URL.createObjectURL", get a valid URL, but by the next line, the image is gone. This works fine in other browsers, I'm assuming we're hitting some limit in IE.
Is there a nicer way of detecting if this URL is valid than trying to load it up?
Seems a little redundant to have to:
AJAX a file.
Get its address on the user's comp.
AJAX that address to make sure it's there.
Code:
var urlObj = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
active--;
if (this.status == 200) {
var blobUrl = urlObj.createObjectURL(new Blob([this.response], {type : 'image/jpeg'}));
image.setSource(blobUrl);
}
}
}
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.send();
So if you call this A LOT (with different URLs) - the blobUrl that we pass to setSource is a sensible looking object URL, but when you try and use it, you get an error.
IE has either cleared up the memory, or lost the image or something. Bearing in mind we're not changing the page, losing the session, or revoking the blobUrl.
The only way I can think of to check if this has happened (i.e. that blobURL no longer points at anything), is to fire another AJAX request at the blobURL, and check it returns 200 etc....
Is there a better way? I'm imagining not.
I've "carved" this code-chunk from a larger block, so if there are any obvious mistakes there that's why. It works around 95% of the time. If I fire the AJAX "check" afterwards, and load the image again on a fail that fixes the issue.
Weird IE behaviour. Anyone else seen this?
More info: We're not using pdf.js, but same problem is reported here: https://connect.microsoft.com/IE/feedback/details/813485/resource-blob-not-found-when-using-url-createobjecturl-blob
This is (more or less) the check that we are using:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4){
if (this.status == 200 || (this.response && this.response.type && this.response.type == "image/jpeg")) {
success(blobUrl);
}
else {
fail(blobUrl);
}
}
}
xhr.open('GET', blobUrl);
xhr.responseType = 'blob';
xhr.send();
Have to use that weird response.type check, because Firefox returns with status == 0.