6

pdf.js webworker を読み込もうとしていますが、できません!?

//cdn.localhost/js/pdf/worker_loader.js?v=280ブラウザで開くとURLが存在する

エラー

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]);
}
4

2 に答える 2

5

問題は、Web Worker を使用して別のドメインからスクリプトをロードしようとしていることです。エラー番号0x805303f4は「制限付き URI へのアクセスが拒否されました」を意味します。

Web ワーカー仕様の引用:

結果の解析済み URL のスキーム コンポーネントが「データ」ではなく、結果の絶対 URL のオリジンがエントリ スクリプトのオリジンと同じでない場合は、SecurityError 例外をスローし、これらの手順を中止します。

注: したがって、スクリプトは、元のページと同じスキーム、ホスト、およびポートを持つ外部ファイルであるか、data: URL である必要があります。

この問題を解決する 1 つの方法は、worker_loader スクリプトを html ページと同じドメインに移動することです。したがって、次workerSrcのようなものを初期化します。

PDFJS.workerSrc = 'worker_loader.js?v=280';

次に、絶対 URL を使用するように worker_loader スクリプトを更新する必要があるため、インポート ループは次のようになります。

for (var i = 0; i < files.length; i++) {
  importScripts('//cdn.localhost/js/pdf/'+files[i]);
}

また、voucher_urlがホストされている場所によっては、XMLHttpRequest. その場合はAccess-Control-Allow-Origin、pdf を提供するドメインにヘッダーを設定する必要があります。

.htaccessmod_headers モジュールがインストールされている場合は、Apacheのファイルを介してこれを行うことができます。次のようなものを追加する必要があります。

Header set Access-Control-Allow-Origin "http://secure.localhost"

複数のホストをサポートする必要がある場合"*"は、ホスト名の代わりに使用できますが、セキュリティ上の理由から一般的にはお勧めできません。

于 2013-06-02T10:27:16.100 に答える