admin管理员组文章数量:1378884
I'm trying to load the pdf.js webworker, but I can't!?
The URL //cdn.localhost/js/pdf/worker_loader.js?v=280 exists when opening it in the browser
error
Failed to load script: //cdn.localhost/js/pdf/worker_loader.js?v=280
(nsresult = 0x805303f4)
html (URL = //secure.localhost)
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript" src="//cdn.localhost/js/pdf/core.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/util.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/api.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/canvas.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/obj.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/function.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/charsets.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/cidmaps.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/colorspace.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/crypto.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/evaluator.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/fonts.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/glyphlist.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/image.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/metrics.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/parser.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/pattern.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/stream.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/worker.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/bidi.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/jpg.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/jpx.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/jbig2.js?v=280"></script>
<script type="text/javascript">
PDFJS.workerSrc = '//cdn.localhost/js/pdf/worker_loader.js?v=280';
PDFJS.getDocument(voucher_url).then(function(pdf){
pdf.getPage(1).then(function(page){
var scale = 1.5,
viewport = page.getViewport(scale),
canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
$(canvas).appendTo(container);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
</script>
</body>
</html>
//cdn.localhost/js/pdf/worker_loader.js?v=280
'use strict';
// List of files to include;
var files = [
'core.js',
'util.js',
'canvas.js',
'obj.js',
'function.js',
'charsets.js',
'cidmaps.js',
'colorspace.js',
'crypto.js',
'evaluator.js',
'fonts.js',
'glyphlist.js',
'image.js',
'metrics.js',
'parser.js',
'pattern.js',
'stream.js',
'worker.js',
'jpx.js',
'jbig2.js',
'bidi.js',
'jpg.js'
];
// Load all the files.
for (var i = 0; i < files.length; i++) {
importScripts(files[i]);
}
I'm trying to load the pdf.js webworker, but I can't!?
The URL //cdn.localhost/js/pdf/worker_loader.js?v=280 exists when opening it in the browser
error
Failed to load script: //cdn.localhost/js/pdf/worker_loader.js?v=280
(nsresult = 0x805303f4)
html (URL = //secure.localhost)
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript" src="//cdn.localhost/js/pdf/core.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/util.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/api.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/canvas.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/obj.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/function.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/charsets.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/cidmaps.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/colorspace.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/crypto.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/evaluator.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/fonts.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/glyphlist.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/image.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/metrics.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/parser.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/pattern.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/stream.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/worker.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/bidi.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/jpg.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/jpx.js?v=280"></script>
<script type="text/javascript" src="//cdn.localhost/js/pdf/jbig2.js?v=280"></script>
<script type="text/javascript">
PDFJS.workerSrc = '//cdn.localhost/js/pdf/worker_loader.js?v=280';
PDFJS.getDocument(voucher_url).then(function(pdf){
pdf.getPage(1).then(function(page){
var scale = 1.5,
viewport = page.getViewport(scale),
canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
$(canvas).appendTo(container);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
</script>
</body>
</html>
//cdn.localhost/js/pdf/worker_loader.js?v=280
'use strict';
// List of files to include;
var files = [
'core.js',
'util.js',
'canvas.js',
'obj.js',
'function.js',
'charsets.js',
'cidmaps.js',
'colorspace.js',
'crypto.js',
'evaluator.js',
'fonts.js',
'glyphlist.js',
'image.js',
'metrics.js',
'parser.js',
'pattern.js',
'stream.js',
'worker.js',
'jpx.js',
'jbig2.js',
'bidi.js',
'jpg.js'
];
// Load all the files.
for (var i = 0; i < files.length; i++) {
importScripts(files[i]);
}
-
The JS file you are referencing is missing. Just make sure it is present, where specified (
//cdn.localhost/js/pdf/worker_loader.js?v=280). – Sirko Commented May 30, 2013 at 10:09
2 Answers
Reset to default 5 +200Your problem is that you're attempting to use a Web Worker to load a script from a different domain. The error number 0x805303f4 means "Access to restricted URI denied".
Quoting the Web workers specification:
If the scheme ponent of the resulting parsed URL is not "data", and the origin of the resulting absolute URL is not the same as the origin of the entry script, then throw a SecurityError exception and abort these steps.
Note: Thus, scripts must either be external files with the same scheme, host, and port as the original page, or data: URLs.
One way of solving this problem is to move the worker_loader script onto the same domain as the html page. So you would be initialising workerSrc something like this:
PDFJS.workerSrc = 'worker_loader.js?v=280';
And then you'd also need to update the worker_loader script to use absolute urls, so the import loop might bee something like this:
for (var i = 0; i < files.length; i++) {
importScripts('//cdn.localhost/js/pdf/'+files[i]);
}
Also, depending on where the voucher_url is hosted, that may also generate a cross domain security error, as that is loaded via an XMLHttpRequest. If that is the case, you'll need to set the Access-Control-Allow-Origin header on the domain that serves the pdf.
You can do this via a .htaccess file on Apache if you have the mod_headers module installed. You'll need to add something like this:
Header set Access-Control-Allow-Origin "http://secure.localhost"
If you need to support multiple hosts, you can use "*" instead of the host name, but that isn't generally advisable for security reasons.
I recently ran into this issue and there actually is a solution for loading the worker from a remote host, though it requires some javascript. As I detailed in a recent blog post, you can load it using AJAX (you'll need to configure your CORS headers) and then you can create a Blob URL from the AJAX response and set that as the PDFJS.workerUrl.
var cachedJSDfd = null;
function loadWorkerURL(url){
if (cachedJSDfd) { return cachedJSDfd; }
cachedJSDfd = PDFJS.createPromiseCapability();
var xmlhttp;
xmlhttp=new XMLHttpRequest();
//the callback function to be callled when AJAX request es back
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var workerJSBlob = new Blob([xmlhttp.responseText], {
type: "text/javascript"
});
cachedJSDfd.resolve(window.URL.createObjectURL(workerJSBlob));
}
};
xmlhttp.open("GET",url,true);
xmlhttp.send();
return cachedJSDfd.promise;
}
function initWebWorker() {
return loadWorkerURL('http://www.domain./path/to/worker.js')).then(function(blob) {
PDFJS.workerSrc = blob;
return PDFJS;
});
}
function openPdf(url) {
return initWebWorker().then(function(PDFJS) {
return PDFJS.getDocument(url);
});
}
More specifics in the blog post linked above.
本文标签： javascriptfailed to load scriptWebworker (PDFJS)Stack Overflow
版权声明：本文标题：javascript - failed to load script - Webworker (PDF.JS) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743975160a2570848.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论