Catch error if iframe src fails to load Error - Refused to display http www google co in in a frame

Question

I am using Knockout js to bind iframe src tag This will be configurable with respect to  User    Now  if user has configured http   www google com  I know it won t load in iframe  thats why I am using it for -ve scenario  and that has to be shown in IFrame  but it throws error -     Refused to display  http   www google co in   in a frame because it   set  X-Frame-Options  to  SAMEORIGIN     I have the following code for Iframe -    lt iframe class  iframe  id  iframe  data-bind  attr   src  externalAppUrl  height  iframeheight   gt       lt p gt Hi  This website does not supports IFrame lt  p gt   lt  iframe gt    What I want is  if the URL fails to load  I want to display Custom Message   FIDDLE HERE   Now  if I use onload and onerror as -   lt iframe id  browse  style  width 100  height 100   onload  alert  Done    onerror  alert  Failed    gt  lt  iframe gt    It works fine loading w3schools com but not with google com   Secondly - if I make it as a function and try like I have done in my fiddle  it doesn t works    lt iframe id  browse  style  width 100  height 100   onload  load  onerror  error  gt  lt  iframe gt    I don t know how should I make it run and capture the error   Edited - I have seen Want to call a function if iframe doesn t load or load s question in stackoverflow but it shows error for sites that can be loaded in iframe   Also  I have looked into Stackoverflow iframe on load event Thanks

User · Answer

I have the same problem  chrome can t fire onerror when iframe src load error   but in my case  I just need make a cross domain http request  so I use script src onload onerror instead of iframe  it s working well

User · Answer

I solved it with window length   But with this solution you can take current error  X-Frame or 404     iframe onload   event   gt       const isLoaded   event target contentWindow window length    0 or 1      MSDN

User · Answer

This is a slight modification to Edens answer - which for me in chrome didn t catch the error  Although you ll still get an error in the console   Refused to display  https   www google ca   in a frame because it set  X-Frame-Options  to  sameorigin    At least this will catch the error message and then you can deal with it      lt iframe id  myframe  src  https   google ca  gt  lt  iframe gt     lt script gt   myframe onload   function     var that   document getElementById  myframe      try       that contentWindow  that contentDocument  location href      catch err         err SecurityError  Blocked a frame with origin  http              from accessing a cross-origin frame      console log  err   err        lt  script gt

User · Answer

As explained in the accepted answer  https   stackoverflow com a 18665488 4038790  you need to check via a server   Because there s no reliable way to check this in the browser  I suggest you build yourself a quick server endpoint that you can use to check if any url is loadable via iframe  Once your server is up and running  just send a AJAX request to it to check any url by providing the url in the query string as url  or whatever your server desires   Here s the server code in NodeJs    x000D   x000D  const express   require  express   x000D  const app   express   x000D   x000D  app get   checkCanLoadIframeUrl    req  res    gt    x000D    const request   require  request   x000D    const Q   require  q   x000D   x000D    return Q Promise  resolve    gt    x000D      const url   decodeURIComponent req query url  x000D   x000D      const deafultTimeout   setTimeout      gt    x000D           Default to false if no response after 10 seconds x000D        resolve false  x000D         10000  x000D   x000D      request   x000D          url  x000D          jar  true     Maintain cookies through redirects    x000D           x000D         on  response    remoteRes    gt    x000D          const opts    remoteRes headers  x-frame-options          toLowerCase   x000D          resolve  opts     opts      deny   amp  amp  opts      sameorigin    x000D          clearTimeout deafultTimeout  x000D           x000D         on  error   function     x000D          resolve false  x000D          clearTimeout deafultTimeout  x000D           x000D       then  result    gt    x000D      return res status 200  json   result  x000D       x000D     x000D   x000D  app listen process env PORT    3100  x000D   x000D   x000D

User · Answer

The onload will always be trigger  i slove this problem use try catch block It will throw an exception when you try to get the contentDocument   iframe onload   function       var that     this  0      try          that contentDocument          catch err             TODO

User · Answer

I faced similar problem  I solved it without using onload handler I was working on AngularJs project so i used  interval and   timeout  U can also use setTimeout and setInterval Here s the code          var stopPolling   var doIframePolling    scope showIframe   true   doIframePolling    interval function          if document getElementById  UrlIframe    amp  amp  document getElementById  UrlIframe   contentDocument head  amp  amp  document getElementById  UrlIframe   contentDocument head innerHTML                  interval cancel doIframePolling           doIframePolling   undefined           timeout cancel stopPolling           stopPolling   undefined           scope showIframe   true          400    stopPolling    timeout function               interval cancel doIframePolling           doIframePolling   undefined           timeout cancel stopPolling           stopPolling   undefined           scope showIframe   false         5000      scope  on   destroy  function              timeout cancel stopPolling            interval cancel doIframePolling          Every 0 4 Seconds keep checking the head of iFrame Document  I somthing is present Loading was not stopped by CORS as CORS error shows blank page  If nothing is present after 5 seconds there was some error  Cors policy  etc   Show suitable message Thanks  I hope it solves your problem

User · Answer

You wont be able to do this from the client side because of the Same Origin Policy set by the browsers   You wont be able to get much information from the iFrame other than basic properties like its width and height   Also  google sets in its response header an  X-Frame-Options  of SAMEORIGIN   Even if you did an ajax call to google you wont be able to inspect the response because the browser enforcing Same Origin Policy   So  the only option is to make the request from your server to see if you can display the site in your IFrame   So  on your server   your web app would make a request to www google com and then inspect the response to see if it has a header argument of X-Frame-Options   If it does exist then you know the IFrame will error

User · Answer

I think that you can bind the load event of the iframe  the event fires when the iframe content is fully loaded   At the same time you can start a setTimeout  if the iFrame is loaded clear the timeout alternatively let the timeout fire   Code   var iframeError   function change         var url       addr   val            browse   attr  src   url       iframeError   setTimeout error  5000      function load e        alert e      function error         alert  error         document  ready function              browse   on  load    function              load  ok            clearTimeout iframeError                   Demo  http   jsfiddle net IrvinDominin QXc6P   Second problem  It is because you miss the parens in the inline function call  try change this    lt iframe id  browse  style  width 100  height 100   onload  load  onerror  error  gt  lt  iframe gt    into this    lt iframe id  browse  style  width 100  height 100   onload  load  Done func     onerror  error  failed function     gt  lt  iframe gt    Demo  http   jsfiddle net IrvinDominin ALBXR 4

[jquery] Catch error if iframe src fails to load . Error :-"Refused to display 'http://www.google.co.in/' in a frame.."

Examples related to jquery

Examples related to iframe

Examples related to knockout.js

Examples related to same-origin-policy