usando javascript para detectar si la url existe antes de mostrar en iframe

Question

Estoy usando javascript para pasar una URL dinámica a iframe src. pero a veces la URL no existe, ¿cómo puedo detectar la url que no existe de antemano, de modo que pueda ocultar el iframe con un error 404?

Answer 1

Puede intentar hacer un simple GET en la página, si obtiene un 200, significa que la página existe. Pruebe esto (usando jQuery), la función es la función de devolución exitosa en una carga de página exitosa. Tenga en cuenta que esto solo funcionará en sitios dentro de su dominio para evitar XSS. Otros dominios tendrán que ser manejados lado del servidor

$.get(
    yourURL, 
    function(data, textStatus, jqXHR) { 
     //load the iframe here... 
    } 
); 

Answer 2

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(); 

Pero nótese que sólo funcionará en el mismo origen. Para otro host, tendrá que use a server-side language para hacer eso, que tendrá que resolver por usted mismo.

Answer 3

Puede probar la URL a través de AJAX y leer el código de estado, es decir, si la URL está en el mismo dominio.

Si se trata de un dominio remoto, puede have a server script en su propio dominio echar un vistazo a una URL remota.

Answer 4

Debido a mi baja reputación, no he podido comentar la respuesta de Derek 朕 會 to. He intentado ese código tal como está y no funcionó bien. Hay tres problemas en el código de Derek 朕 會 功夫.

1. La primera es que el tiempo para enviar la solicitud asíncrona y cambiar su 'status' propiedad es más lento que ejecutar la siguiente expresión - si (request.status === "404"). Entonces el request.status eventualmente, debido a la banda de internet, permanecerá en el estado 0 (cero), y no logrará el código justo debajo si. Solucionar eso es fácil: cambie 'verdadero' a 'falso' en el método abierto de la solicitud de ajax. Esto causará un bloqueo breve (o no) en su código (debido a una llamada síncrona), pero cambiará el estado de la solicitud antes de llegar a la prueba sobre si.

2. El segundo es que el estado es un número entero. Usando el operador de comparación javascript '===', estás tratando de comparar si el objeto del lado izquierdo es idéntico a uno del lado derecho. Para que esto funcione, hay dos formas:

   • Elimina las comillas que rodean 404, convirtiéndolo en un entero;
   • Usa el operador de javascript '==' para que pruebes si los dos objetos son similares.

3. El tercero es que el objeto XMLHttpRequest solo funciona en los navegadores más nuevos (Firefox, Chrome e IE7 +). Si quieres que fragmento de trabajar en todos los navegadores que tienen que hacer en el camino W3Schools sugiere: w3schools ajax

El código que realmente trabajó para mí era:

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."); 
} 

Answer 5

me encontré con esto funcionó en mi guión.

Los métodos de devolución de llamada jqXHR.success(), jqXHR.error() y jqXHR.complete() introducidos en jQuery 1.5 están en desuso a partir de jQuery 1.8. Para preparar su código para su eventual eliminación, use jqXHR.done(), jqXHR.fail() y jqXHR.always() en su lugar.

$.get("urlToCheck.com").done(function() { 
    alert("success"); 
}).fail(function() { 
    alert("failed."); 
});