using javascript to detect whether the url exists before display in iframe

Question

I m using javascript to pass a dynamic url to iframe src  but sometimes the url does not exist  how could i detect the non-exist url beforehand  so that i can hide the iframe that with 404 error

User · Answer

You could test the url via AJAX and read the status code - that is if the URL is in the same domain   If it s a remote domain  you could have a server script on your own domain check out a remote URL

User · Answer

Use a XHR and see if it responds you a 404 or not   var request   new XMLHttpRequest      request open  GET    http   www mozilla org   true   request onreadystatechange   function        if  request readyState     4           if  request status     404                  alert  Oh no  it does not exist                          request send      But notice that it will only work on the same origin  For another host  you will have to use a server-side language to do that  which you will have to figure it out by yourself

User · Answer

I created this method  it is ideal because it aborts the connection without downloading it in its entirety  ideal for checking if videos or large images exist  decreasing the response time and the need to download the entire file    if-url-exist js v1 function ifUrlExist url  callback        let request   new XMLHttpRequest      request open  GET   url  true       request setRequestHeader  Content-Type    application x-www-form-urlencoded  charset UTF-8        request setRequestHeader  Accept               request onprogress   function event            let status   event target status          let statusFirstNumber    status  toString   0           switch  statusFirstNumber                case  2                   request abort                    return callback true               default                  request abort                    return callback false                         request send          Example of use  ifUrlExist url  function exists        console log exists

User · Answer

I found this worked in my scenario   The jqXHR success    jqXHR error    and jqXHR complete   callback methods introduced in jQuery 1 5 are deprecated as of jQuery 1 8  To prepare your code for their eventual removal  use jqXHR done    jqXHR fail    and jqXHR always   instead     get  urlToCheck com   done function        alert  success       fail function         alert  failed

User · Answer

Due to my low reputation I couldn t comment on Derek      s answer  I ve tried that code as it is and it didn t work well  There are three issues on Derek      s code     The first is that the time to async send the request and change its property  status  is slower than to execute the next expression - if request status      404    So the request status will eventually  due to internet band  remain on status 0  zero   and it won t achieve the code right below if  To fix that is easy  change  true  to  false  on method open of the ajax request  This will cause a brief  or not so  block on your code  due to synchronous call   but will change the status of the request before reaching the test on if  The second is that the status is an integer  Using       javascript comparison operator you re trying to compare if the left side object is identical to one on the right side  To make this work there are two ways    Remove the quotes that surrounds 404  making it an integer  Use the javascript s operator      so you will be testing if the two objects are similar   The third is that the object XMLHttpRequest only works on newer browsers  Firefox  Chrome and IE7    If you want that snippet to work on all browsers you have to do in the way W3Schools suggests  w3schools ajax   The code that really worked for me was   var request  if window XMLHttpRequest      request   new XMLHttpRequest    else     request   new ActiveXObject  Microsoft XMLHTTP    request open  GET    http   www mozilla org   false   request send       there will be a  pause  here until the response to come     the object request will be actually modified if  request status     404        alert  The page you are trying to reach is not available

User · Answer

You can try and do a simple GET on the page  if you get a 200 back it means the page exists  Try this  using jQuery   the function is the success callback function on a successful page load  Note this will only work on sites within your domain to prevent XSS  Other domains will have to be handled server side    get     yourURL     function data  textStatus  jqXHR            load the iframe here

[javascript] using javascript to detect whether the url exists before display in iframe

Examples related to javascript

Examples related to iframe

Examples related to http-status-code-404