2013-05-30 5 views
4

나는 pdf.js의 webworker를로드하기 위해 노력하고있어,하지만 난 못해!? 브라우저를 열 때스크립트를로드하지 못했습니다 - Webworker (PDF.JS를)

의 URL //cdn.localhost/js/pdf/worker_loader.js?v=280 존재

오류

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

참조하는 JS 파일이 없습니다.지정한 위치에 있는지 확인하십시오 ('/cdn.localhost/js/pdf/worker_loader.js? v = 280'). URL이 존재 – Sirko

+0

.. – clarkk

답변

3

웹 작업자를 사용하여 다른 도메인의 스크립트를로드하려고하면 문제가 발생합니다. 오류 번호 0x805303f4은 "제한된 URI에 대한 액세스가 거부되었습니다"를 의미합니다. 결과 분석 URL의 체계 구성 요소는 "데이터", 결과 절대 URL의 기원이 항목 스크립트의 기원과 동일하지가 아닌 경우,

:

Web workers specification를 인용 SecurityError 예외를 throw하고 이러한 단계를 중단합니다.

참고 : URL을 : 따라서, 스크립트는 원래의 페이지 또는 데이터와 동일한 방식 호스트 및 포트와 외부 파일 중 하나 여야합니다. 이 문제를 해결

한 가지 방법은 HTML 페이지와 같은 도메인 상에 worker_loader 스크립트를 이동하는 것입니다. 그래서 당신은이 같은 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을 통해로드되므로 도메인 간 보안 오류가 발생할 수도 있습니다. 이 경우 pdf를 게재하는 도메인에 Access-Control-Allow-Origin 헤더를 설정해야합니다. 당신이 mod_headers 모듈이 설치되어있는 경우

당신은 아파치에 .htaccess 파일을 통해이 작업을 수행 할 수 있습니다. 여러 호스트를 지원해야하는 경우 호스트 이름 대신 "*"을 사용할 수 있습니다

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

,하지만 일반적으로 보안상의 이유로 권장하지 않습니다 :이 같은 것을 추가해야합니다.

+0

가 이제 완료 한 현재 스크립트가로드,하지만 문제는 등 모든 PDF 파일에서 호스팅되는 것입니다'cdn.localhost'는 ... 스크립트/작업자에'secure.localhost'를 앞에 추가 같은 URL이'HTTP : //secure.localhost//cdn.localhost/data/voucher/6_27396e52af0266d7ce9628b16 73a014f32c36aa2.pdf'와 pdfjs로 시작하는 부분 URL을 지원하지 않기 때문에 년대 PDF – clarkk

+0

를로드 할 때 404을 반환'//' . 프로토콜을 포함한 전체 URL을 지정해야합니다. url이 항상'//'로 시작한다는 것을 안다면'getDocument'를 호출하기 전에 url에'window.location.protocol'을 접두사로 붙이십시오. 그렇지 않은 경우, 코드를 더 일반화하려면 util.js의'combineUrl' 함수를 패치 할 수 있습니다. –

+0

에 http'URL에'window.location.protocol'을 추가 한'.. //cdn.localhost/data/voucher/6_27396e52af0266d7ce9628b1673a014f32c36aa2.pdf 200 OK' 그러나 파일이 거부되었습니다 오류 ('A 약속 한 번만 거부 할 수 있습니다 '+ this.name);' – clarkk

0

는 최근이 문제에 달려 실제로 일부 자바 스크립트를 필요로하지만, 원격 호스트로부터 작업자를로드하기위한 솔루션이있다. 내가 in a recent blog post 상세한, 당신은 (당신이 당신의 CORS 헤더를 구성해야합니다) AJAX를 사용하여로드 할 수 있습니다 다음은 AJAX 응답에서의 Blob URL을 만들 수 있고, 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 comes 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.com/path/to/worker.js')).then(function(blob) { 
     PDFJS.workerSrc = blob; 
     return PDFJS; 
    }); 
} 

function openPdf(url) { 
    return initWebWorker().then(function(PDFJS) { 
     return PDFJS.getDocument(url); 
    }); 
} 

더 구체적인 위에 링크.

관련 문제