"Load Error" when trying to open PDF in Cordova InAppBrowser

Question

In my Cordova app, I use InAppBrowser to present PDF documents

window.open = cordova.InAppBrowser.open;

document.onclick = function (e) {
  e = e || window.event;
  var element = (e.target || e.srcElement).closest("a");
  if (element && element.getAttribute('target') === '_blank') {
    window.open(element.href, "_blank", "location=yes,enableViewportScale=true");
    return false; // prevent default action and stop event propagation
  }
};

It works fine for one PDF, but another shows "Load Error". What's going on?

Answer 1

You can get more information about the error by listening for the loaderror event:

const inAppBrowserRef = window.open(element.href, "_blank", "location=yes,enableViewportScale=true");

inAppBrowserRef.addEventListener('loaderror', (params) => {
  console.log('error:', params);
});

In my case, the error being reported was "Frame Load Interrupted". Searching on that error led me to this answer about MIME types. Sure enough, I was incorrectly setting the MIME type of my PDF to "application/octet-stream" instead of "application/pdf". Resolving this resolved the load error error I was getting.

I hope this helps someone!