Issue in IE11 with pdf.js: src property (0x800a138f)


My application uses pdf.js to display PDF files, and everything works smoothly except for one issue with Internet Explorer. Whenever I try to start the app on IE, an exception is thrown:

Unhandled exception at line 8290, column 5 in http://.../scripts/pdf-js/pdf.js

0x800a138f - Timeout execution error JavaScript Code: Couldn't load(get) "src" property fo undefined or empty call.

Although the PDF rendering works perfectly, I would like to find a solution to eliminate this exception message. (Please note that I translated the error message from the code "0x800a138f". If anyone knows the exact English error content, I'll update it and adjust the question title accordingly).

UPDATE
This error occurs every time the application is launched. Despite the error, the functionality works well. The problem is with these specific lines of code in the pdf.js script:

if (!PDFJS.workerSrc && typeof document !== 'undefined') {
  // workerSrc is not set -- using last script url to define default location
 PDFJS.workerSrc = (function () {
    'use strict';
     var pdfJsSrc = document.currentScript.src; // here the src cannot be found
     return pdfJsSrc && pdfJsSrc.replace(/\.js$/i, '.worker.js');
   })();
}

Answer №1

To resolve issues on IE11, don't forget to add compatibility.js to your project.

Download compatibility.js from this link

<script src="compatibility.js"></script>

compatibility.js is essential for adding any missing features PDFJS requires.

Moreover, it addresses issues like Safari not loading certain PDFs correctly.

Answer №2

To resolve the issue at hand, I came up with a relatively straightforward solution, although I cannot guarantee its safety. In my particular scenario, I found that the PDF viewing function started working properly once I implemented an additional condition:

if (!PDFJS.workerSrc && typeof document !== 'undefined' && typeof document.currentScript !== 'undefined' ) {
  // If workerSrc is not defined, use the URL of the last script to establish the default location
  PDFJS.workerSrc = (function () {
  'use strict';
   var pdfJsSrc = document.currentScript.src;
   return pdfJsSrc && pdfJsSrc.replace(/\.js$/i, '.worker.js');
   })();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unraveling the mystery: Retrieving event.target.value in a React component

Having trouble accessing the event.target.value from a React child Component, but not an HTML tag? In this scenario: the Button tag (React Component) cannot access event.target.value, while the button tag (HTML tag) can. import React from "react"; impor ...

Adding a query parameter to my website causes a particular element to fail to display on the page

I'm facing a challenge in sharing my code, but since my project is open source, you can find the code here. I've noticed that when I receive a link from another site with /? at the end, it causes an issue on my website where the hero image secti ...

What is the best method for converting an Object with 4 properties to an Object with only 3 properties?

I have a pair of objects: The first one is a role object with the following properties: Role { roleId: string; name: string; description: string; isModerator: string; } role = { roleId:"8e8be141-130d-4e5c-82d2-0a642d4b73e1", ...

Using JavaScript to create an array within an object and adding new elements to the array

I'm just beginning to learn programming and experimenting with React. I have a function called addComment that is triggered when a user adds a comment to a news article. At this point, I need to create a property called comments (an array) and either ...

Dealing with API responses after submitting files in Angular

My current setup involves a form where users upload files to my node server. The server then performs some operations and responds with a JSON object. The POST request is not made through the controller, but by submitting the form directly. Once the serve ...

Where should uploaded files be stored using ng-flow?

Initially, I am utilizing the ng-flow, which is an html5 file upload extension built on the angular.js framework. After uploading my files and logging the event in the console, I'm uncertain about where and how to store them. Below is my HTML code w ...

Tips for recognizing a specific object ID within an array in order to modify the status of an element within that object

My goal is to accurately identify a specific panel within an expanded array and link that panel's ID to a button, while also ensuring the button is disabled when no panels are expanded or more than one panel is expanded. However, I am encountering iss ...

Error: The react.js application is unable to access the property 'classList' of a null object

I've encountered a bug that's been causing me some trouble. Every time I try to run my react application, I keep getting an error message that reads TypeError: Cannot read property 'classList' of null. As someone who is new to react, I& ...

What is the fastest and most efficient method to confirm that all rows in a 2D array are of equal length?

Imagine you have a 2D array like this: const matrixRegular = [ ['a', 'b', 'c'], ['e', 'f', 'g'], ]; Now, let's think about how we can check if every row in this matrix has the same ...

populate a data list with information sourced in Angular 8

I am looking to populate this model oldDataSource: Array<any> = []; with the values from the datasource. This is the code I have tried: ngOnInit(): void { this.dataSourceInit(); } dataSourceInit(): void { this.dataSource = new DefaultScore ...

In Javascript, objects within local scope cannot be accessed from nested functions

I'm currently working on a function that is meant to retrieve an object from a PHP file located on a different page. I've implemented the jQuery ajax function to handle the JSON retrieval, and it seems to be functioning as intended. However, I&ap ...

Encountering CORS Error while trying to access Guest App in Virtualbox using Vue, Express, and Axios

I encountered an issue while trying to access my Vue app in Virtualbox from the host, both running on Linux Mint 20. Although I can now reach the login page from my host, I am consistently faced with a CORS error during login attempts: Cross-Origin Request ...

An issue with JSPDF arises when used on mobile devices

Currently, I am working on a project to create a responsive web application, which involves utilizing JSPDF for generating PDF reports directly from HTML. For a demonstration of the functionality, you can check out this Demo. Unfortunately, when trying t ...

How to implement a form in PHP that doesn't refresh the page upon submission

I am having an issue with this ajax code. I know it works, but for some reason it's not submitting. <script type="text/javascript"> $(function(){ $('input[type=submit]').click(function(){ $.ajax({ type: "POST", ...

React Issue: Make sure to assign a unique "key" prop to each child element within a mapped list

I encountered the error message below: react Each child in a list should have a unique "key" prop. Here is my parent component code snippet: {data.products .slice(4, 9) .map( ({ onSale, ...

Removing a method signature from a type that extends a function returning any in TypeScript

I am currently developing an API in typescript where I aim to return a function that includes multiple functions as properties, one of which is the same function. My approach to achieving this includes: type MainFunc = () => PublicInterface type Publi ...

What criteria does Angular use to determine if a promise has been fulfilled?

Recently, I've delved into the realm of Angular promises for fetching data from a web service. One intriguing aspect that has caught my interest is how Angular somehow has the capability to determine whether a "request" has been successfully fulfilled ...

Attempting to conceal the select input and footer components of the Calendar component within a React application

I am currently working on customizing a DatePicker component in Antd and my goal is to display only the calendar body. Initially, I attempted to use styled components to specifically target the header and footer of the calendar and apply display: none; st ...

Guide on how to choose a radio button in IONIC with the help of angularJS

<ion-list> <ion-radio ng-model="choice" ng-value="'A'" ng-click='usedGNG("yes")'>Yes</ion-radio> <ion-radio ng-model="choice" ng-value="'B'" ng-click='usedGNG("no")'>No</ion-radio> </ ...

Using blending modes with gradient colors in an SVG design

I'm struggling to get my logo to change colors upon scrolling into a button with similar gradient colors, but I just can't seem to make it work. Can anyone lend me a hand? Thank you! Take a look at my Logo. I've attempted to add some styles ...