pdf.js not working with Safari - javascript

We're testing out pdf.js and while it seems like an awesome project we can't get it working in Safari.
(Tested on PDF.JS version = 0.8.229 (latest) / Safari 5.1.9 - 6.0.4 / Mac OSX 10.6.8 - 10.8.3)
EXAMPLE:
This is an example of the demo code served from our server with a sample PDF that works on Chrome/FFox but not Safari:
http://test.appgrinders.com/pdf_js/test.html
Console output:
Warning: Setting up fake worker.
Error: Invalid XRef stream (while reading XRef):
Error: Invalid XRef stream pdf.js:850undefined
Warning: Indexing all PDF objects
Error: Invalid XRef stream (while reading XRef):
Error: Invalid XRef stream pdf.js:850undefined
More tests:
The following is a list of sample PDFs we tested (They were all served from our server, and all worked in Chrome/FFox/Android). The only one that worked with Safari was the PDF file served from the pdf.js project itself:
FAILS IN SAFARI:
http://samplepdf.com/sample.pdf
http://forums.adobe.com/servlet/JiveServlet/previewBody/2041-102-1-2139/Sample.pdf
https://github.com/prawnpdf/prawn/raw/master/data/pdfs/form.pdf
WORKS IN SAFARI:
http://cdn.mozilla.net/pdfjs/helloworld.pdf
(NOTE: This is a sample PDF from the pdf.js project and the only one we ever got working)
We've submitted a bug report, but the developers do not seem to have an answer, so I'm hoping someone here might...
How can we get pdf.js working with Safari?

I've figured out how to get things working on Mac Safari (without necessarily understanding why)...
compatibility.js must be included.
PDFJS.workerSrc must be assigned.
The demo code I had been testing (from the JS Bin demos here)
does not do this, though some other online examples do (including
the hello world example and the examples provided by
#AndrewBenjamin – thanks). Other browsers don't seem to require this,
but Safari won't work without it.
<script type="text/javascript" src="compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<!-- NEED THIS for Safari Mac to render work -->
<script type="text/javascript">
// Specify the main script used to create a new PDF.JS web worker.
// In production, change this to point to the combined `pdf.js` file.
PDFJS.workerSrc = 'pdf.worker.js';
</script>
Again, can't explain why, but this is how we got it working for us.

I've got PDF.js working fine in Safari on my local server, but when I put it on the remote server, the goofy error comes back:
Warning: Setting up fake worker.
Unhandled rejection: Error: INVALID_STATE_ERR: DOM Exception 11
It will also show this error on my local computer if I happen to have the developer console open. Close the console, PDF displays in Safari; open the console, and it doesn't work anymore.
The question is: what do the developer tools and the remote server change versus running on a local server? Is this still a range-checking problem?
I got PDF.js to work, though! I've modified so much stuff I don't know what part of what I did worked. Here's a list of stuff I did.
Added compatibility.js – modified the last function in it to read like this:
(function checkRangeRequests() {
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
if (!isSafari) {
return;
}
document.addEventListener('DOMContentLoaded', function (e) {
if (isSafari) {
PDFJS.disableRange = true;
}
});
})();
Changed the order of xhr.open() calls in pdf.js so that xhr.setRequestHeader() occurs after xhr.open()
Removed all 'use strict'; lines
Added xhr.setRequestHeader("Cache-control", "no-cache"); after xhr.open on lines 37272 and 41262
Minified pdf.js and it all works all the time!

PDFJS.getDocument() will accept either a string link or a Uint8Array. In my client side version I pass PDFJS.getDocument() a Uint8Array, but if I want an existing file rendered, I just pass the path to the file:
jspdf line 965:
PDFJS.getDocument('..files/pdf/sample.pdf').then(function(pdf) {
I don't know what makes your safari browser fail, but if you can see sample.pdf on my test site, you have to be very close to solving this.

I've figured out how to get things working on Mac Safari & iPad
I removed the 'strict mode' at the beginning of
1. pdf.js/src/core/worker.js
2. pdf.js/web/download_manager.js
And worked!!

if you're going to support versions below Safari 14, from what I understood PDFjs doesn't support that.
you will need to use an external viewer in an object tag:
<object data="https://drive.google.com/viewerng/viewer?embedded=true&url=https://researchtorevenue.files.wordpress.com/2015/04/1r41ai10801601_fong.pdf&embedded=true"></object>

I had the same problem with Safari Mobile... Can't open more than 1 Mb PDF's... I solved fragmenting the file in parts of 900 kb, join them in local and then injecting to pdf.js as Uint8Array() object. I think it's a no documented limitation.

Related

JavaScript is not loading for some pages in Chrome, Firefox, etc., but loads correctly in Brave

There are a couple of pages that have started to load incorrectly on most browsers on my computer:
https://www.appfrontier.com/documentation/
https://login.live.com/
When these pages load I see blank space and overlapping text, which seems to be the result of JavaScript not running properly on the page.
This happens in Chrome, FireFox, Opera, IE, and Edge. I am using Windows 10.
However, when I load these same pages in Brave browser, they load fine and everything works.
This issue is specific to one computer... On my other computer the pages load fine on all browsers.
I tried to figure out the problem and notice that when chrome requests for some HTML/JavaScript files, an error occurs when evaluating window.navigator.userAgent. For example, the browser should retrieve the following .js file:
function isIE() {
var ua = window.navigator.userAgent;
// do stuff depending on the browser
}
However, instead, the below code is returned as the response to retrieve the .js file:
function isIE() {
var ua = window.'Mozilla/5.0 (PlayStation 4 3.11) AppleWebKit/537.73 (KHTML, like Gecko)'
// do stuff depending on the browser
}
Because of this, an error occurs "Uncaught SyntaxError: Unexpected string"
I think something is wrong with my computer but I have no idea what. I tried uninstalling and reinstalling each browser but that does not work. Any suggestions are appreciated.
Found out the problem. It was Iolo System Mechanic. Looking back I feel stupid for using the product because it said that it was actively "cleaning up" windows and internet junk files. I'm guessing it deleted something that broke JavaScript loading for pages that use window.navigator.userAgent.

VS2015 error "Application is not currently attached to a script debug target that supports script diagnostics"

I created JS & HTML5 Blank App with Visual Studio 2015. When running it in VS debugger in "Local Machine" mode, I get the following error message:
Application is not currently attached to a script debug target that
supports script diagnostics
Just ignoring the error is not workable as at least breakpoints and console.log("text") do not work.
I'm having default options in VS.
I am running normal Win10, with automatic updates on.
Reinstallation of VS2015 did not solve the issue.
This worked for me although I was doing something slightly different. I got the same error message using IE 11 accessing a HTML file from my local file system (was mucking around with HTML). Seems IE developer tools don't much like this mode of operation (why?!). Here's my story...
File on my local windows laptop:
c:\temp\test.html
Can be opened in these browsers:
URL: file:///C:/Temp/test.html (in chrome)
URL: C:\Temp\test.html (in IE 11)
In Chrome tools commands in the console can be run no problem e.g.
console.log("hi");
In IE developer tools this fails with the message cited by the op.
I had a reverse proxy installed on my laptop (nginx) so tried serving the file up via HTTP and this fixed the issue with IE. Here's how I would access the file via HTTP via the proxy:
http://localhost:9092/temp/test.html
For reference here's my nginx.conf (but any other proxy would I expect work fine)...
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
server {
listen 9092;
server_name localhost;
location /temp {
alias "C:/temp/";
}
}
}
In my case (VS 2017 not 2015), the option shown below had somehow become unticked (I'm blaming an update). Before ticking this I was getting the same error as the OP; after ticking it, all is well again.
NB I'm debugging the Javascript within a WebBrowser control hosted in a Winform.
I finally got this solved with the help of Jack-Zhai in msdn forum. So, the summary of my journey:-
Problem:
- Running JS UWP blank app in debug mode & local machine w default settings in VS2015 generates a warning "Application is not currently attached to a script debug target that supports script diagnostics" into JavaScript console. Breakpoints do not work, adding console.log("here") does not write anything to console
Solution trial 1:
- changing and playing with VS2015 settings; the problem still exists
Solution trial 2:
- reinstalling VS2015; the problem still exists
Solution trial 3:
- reinstalling Windows10 - all applications deleted but user data not
- installing VS2015
=> Problem solved; debugging blank app works, and console.log("test") works

Firefox extension : gMultiprocessBrowser is not defined

I am porting a Firefox v22 extention Firefox v31, my plugin works fine on FFv22 but its not working on FFv31.
In my plugin I have changed the overall browser look, so I have made changes in browser.xul.
The problem which i am facing is that I cannot open any webpage i.e none of the urls are redirected and when I am trying to use javascript call:
gBrowser.selectedTab = gBrowser.addTab("");
gBrowser.selectedTab = loadURI(someURL,null,null);
I am getting ReferenceError: gMultiprocessBrowser is not defined
exception.fileName gives me chrome://browser/content/tabbrowser.xml
linenumber: 1422
I am also not able to add new tabs.
As it turned out, I was using old browser.js file & there has been a lot of changes in current version Firefox's browser.js so I just had to port my old code snippets into new browser.js file and it worked.

JavaScript: "Uncaught SecurityError" when running JS-XSL demo locally

(This question pertains to the JS-XSL demo found here)
To briefly tell you what this demo is for; it takes a MS Excel file as input, parses the data, and outputs the data in text-only format. I downloaded the package (zip) and ran it locally, simply by opening the html file with Chrome.
The problem is, I just cannot seem to get over the following error:
Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///C:/Users/David/Desktop/Xlsx%20Demo/xlsworker.js' cannot be accessed from origin 'null'.
And above error points to line 34 of the html file, which has the following code:
/* I changed the file path from './xlsworker.js' to 'xlsworker.js' */
var worker = new Worker('xlsworker.js');
There are only three files for this demo: the html file itself, and two javascript files, one is named xls.js and the other xlsworker.js. All three files are in the same directory and at the same level.
What's rather baffling to me is, I successfully ran this same demo about a couple months ago! I cannot imagine if I am doing anything differently now. Any insight?
https://code.google.com/p/chromium/issues/detail?id=278883#c9
You are basically prevented by Chromium to use workers on the file:// protocol, you have to host your files and access them through the http:// protocol.
You need a server (even something simple like http://docs.python.org/2/library/simplehttpserver.html)
IMO, the below is a superior answer, because it does not require running a web-server. It's extremely quick and simple.
(the downvote is explained in my Note 5, below)
I have tested and verified that this solution works with the demo linked by the asker, when run locally as described by the asker. Tested on Windows 10, Chrome Stable x64 48.0.2564.103 m.
A script is not allowed to access to your local file system in Chrome. If you'd like to test web workers locally, you have to open Chrome with a special flag.
On Windows, launch chrome with the flag:
chrome.exe --allow-file-access-from-files
After that Chrome will be launched and you can test workers during this session.
Note1: if Chrome is already running when you run this command, the new instance of Chrome will not allow Workers to run-- you must first exit from Chrome (if necessary, use Windows Task Manager to ensure Chrome is not running).
Note 2: the source for this answer (link below) includes the --args flag on Windows, but i have not found the "args" to be necessary on Windows. In fact, i cannot find any documentation of the "args" flag anywhere-- not sure what it does. So i don't include it in the Windows command, above.*
Note 3: For those trying to do something similar on Chrome-Mac, or Windows-Firefox, the link below includes both, along with the Windows-Chrome solution above. But my solution described above is only the Windows-Chrome method.
http://js-workout.tompascall.com/web-workers-and-responsiveness/
Note 4: Be aware that this solution is not the same as running a web-server, but for your purpose it should be a completely adequate solution. Also, be aware that to browse the web with this chrome startup-switch enabled may compromise your local file-security, so it's advised to only use this method for your local file purpose, and disable it for web-browsing.*
Note 5: Google states that using startup flags "should only be used for temporary cases and may break in the future." Web search for chrome startup switches returns about 2,000 hits, so lots of people use them and blog about them. If your need is temporary, then this currently works great.*

Windows Phone 7 and 8 with PhoneGap + Angular dies during bootstrapping

Windows Phone 7 or 8
PhoneGap 3
AngularJS 1.2
I have a PhoneGap app using AngularJS that works great on iOS and Android, but I'm having a problem getting it to work on Windows Phone 7 and 8.
The app starts fine and I see my index.html page (which in my case is just a loading screen). Source files are loaded and my pre-boot code is running fine.
Then it stops and nothing happens.
I've littered "console.log" messages throughout the code and I see it gets to the point of angular.bootstrap() and then dies. I'm not familiar enough with angular to know what to do next or how to debug this further to track down what the absolute problem code might be. Inside of bootstrap() begins the maze of DI calls so the code becomes much less linear.
I do see this error in the console but have no idea what it means or how to fix it:
An exception of type 'System.NotSupportedException' occurred in Microsoft.Phone.ni.dll and wasn't handled before a managed/native boundary
No other errors or any output is logged to the console. I tried delaying all of my bootstrap code by 10 seconds with a setTimeout and that error is always reported before angular.bootstrap() is called, so I don't know if it is even related.
Also worth noting that I've tried the app in IE on the desktop and it works fine there.
So my question is: How do I go about debugging this?
I am unsure of WP7/8 but if it follows Windows 8 pattern try adding JQuery 2.0 before angular.js
http://net.tutsplus.com/tutorials/javascript-ajax/building-windows-store-applications-with-jquery-2-0/
I agree with Jason, use Windows special/custom jQuery. And add unsafe=true
<script src="js/jquery-1.8.2-win8-1.0.min.js"></script>
<script type="text/javascript">
jQuery.isUnsafe = true;
</script>
The functionality of the Windows 8-patch had been included in jQuery 2.0. So can just use jQuery 2.0 in the same way, and it will work'.
So you can also use:
<script src="/lib/jquery-2.0.0.min.js"></script>
<script>
jQuery.isUnsafe = true;
</script>
I don't think this error is relevant because it is present even if you start Cordova/Phongap template app (I tried with Cordova 2.9.0). Visual Studio dosen't give any good explanation why app is not running, that's why I tried weinre and got the following massage on app reloade with angular-1.0.8
Error: Access is denied.
at hookedFunction (http://"my-weinre-ip":8080/target/target-script-min.js#ddtest:551:1)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:9457:7)
at sendReq (x-wmapp0://www/components/angular/angular.js:9334:9)
at $http (x-wmapp0://www/components/angular/angular.js:9125:7)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:9268:11)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:7592:17)
at wrappedCallback (x-wmapp0://www/components/angular/angular.js:6996:15)
at wrappedCallback (x-wmapp0://www/components/angular/angular.js:6996:15)
at Anonymous function (x-wmapp0://www/components/angular/angular.js:7033:11)
at $eval (x-wmapp0://www/components/angular/angular.js:8219:9)
I reported it to angular here
EDIT
I managed to get a basic angular app running in phonegap WP7 (haven't tested it yet on WP8) by
applying fix from github ( I can't post second link not enough reputation)
#github/RobbinHabermehl/angular.js/commit/2645faad908529b5d33af960270755dd65a9aa78
including jquery (2.0.3) above angular.js
changing line of code in angular from
var xhr = new XHR();
to
var xhr = new XMLHttpRequest();
manually bootstrapping angular app after cordova deviceready event fired
I reported it in my original thread here

Categories

Resources