Javascript中的全局作用域變量未按預期工作

<html> 
<body> 
    <div> 
    <button id="prev" onclick="goPrevious()">Previous</button> 
    <button id="next" onclick="goNext()">Next</button> 
    &nbsp; &nbsp; 
    <span>Page: <span id="page_numo"></span>/<span id="page_count"></span></span> 
    <input type=text id="elNum" value=1> 

    </div> 

    <div> 
    <canvas id="the-canvas" style="border:0px solid black"></canvas> 
    </div> 

    <!-- Use latest PDF.js build from Github --> 
    <script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script> 

    <script type="text/javascript"> 
    // 
    // NOTE: 
    // Modifying the URL below to another server will likely *NOT* work. Because of browser 
    // security restrictions, we have to use a file server with special headers 
    // (CORS) - most servers don't support cross-origin browser requests. 
    // 
    var url = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf'; 

    // 
    // Disable workers to avoid yet another cross-origin issue (workers need the URL of 
    // the script to be loaded, and currently do not allow cross-origin scripts) 
    // 
    PDFJS.disableWorker = true; 

    var pdfDoc = null, 
     pageNum = 1, 
     scale = 0.8, 
     canvas = document.getElementById('the-canvas'), 
     ctx = canvas.getContext('2d'); 





    // 
    // Get page info from document, resize canvas accordingly, and render page 
    // 
    function renderPage(num) { 
     // Using promise to fetch the page 
     pdfDoc.getPage(num).then(function(page) { 
     var viewport = page.getViewport(scale); 
     canvas.height = viewport.height; 
     canvas.width = viewport.width; 

     // Render PDF page into canvas context 
     var renderContext = { 
      canvasContext: ctx, 
      viewport: viewport 
     }; 
     page.render(renderContext); 
     }); 

     // Update page counters 
     document.getElementById('page_numo').textContent = pageNum; 
     document.getElementById('page_count').textContent = pdfDoc.numPages; 
     sic = document.getElementById('elNum'); 
     sic.value = pageNum; 
    } 

    crc = 1; 
    // 



    // Go to previous page 
    // 

    function goPrevious() { 
     if (pageNum <= 1) 
     return; 
     pageNum--; 
     crc = pageNum;  
     renderPage(pageNum); 
    } 

    // 
    // Go to next page 
    // 
    function goNext() { 
     if (pageNum >= pdfDoc.numPages) 
     return; 
     pageNum++; 
     crc = pageNum; 
     renderPage(pageNum); 
    } 

    // 
    // Asynchronously download PDF as an ArrayBuffer 
    // 
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) { 
     pdfDoc = _pdfDoc; 
     renderPage(pageNum); 
    }); 
    document.write ('Current page is '+crc); 
    </script> 

</body> 
</html>

這就是代碼。這是在線PDF渲染器的最簡單版本（pdf.js）。我一直在研究一個需要將pageNum（當前pdf頁碼）變量通過url傳遞給另一個腳本進行處理的項目。但問題是，我一直無法檢索renderPage函數外的pageNum值。我認爲這是Javascript變量範圍的問題，但不能看到我的企圖通過crc變量或通過document.getElementById（'elNum'）提取的錯誤值... （請參閱document.write（'Current page is' + crc）;在腳本結尾處和第8行的字段中查看我是如何嘗試檢索值的）。Javascript中的全局作用域變量未按預期工作

任何人都可以給我任何關於我做錯什麼的線索？測試頁在這裏（http://jsbin.com/pdfjs-prevnext-v2/2091/edit）

注：我已經看到關於這個主題的其他問題，但這似乎是一個奇怪的情況。真的需要一些幫助，希望未來有人會需要它。

來源

2013-03-19 Boris Javier Barrera

document.write ('Current page is '+crc)僅在頁面加載時執行。 crc是一個全局變量，可以使用。

var viewCurrPage = function() { 
     console.log('Current page is '+crc); 
    }; 

    function goPrevious() { 
      if (pageNum <= 1) 
      return; 
      pageNum--; 
      crc = pageNum;  
      renderPage(pageNum); 
      viewCurrPage(); 
     }; 

function goNext() { 
     if (pageNum >= pdfDoc.numPages) 
     return; 
     pageNum++; 
     crc = pageNum; 
     renderPage(pageNum); 
     viewCurrPage(); 
    }

來源

2013-03-19 03:41:36

是的，感謝您的回答，這太棒了！但我無法弄清楚如何通過url傳遞變量crc到另一個進程頁面，例如：document.write（'Page to process is '+crc+''）;有任何想法嗎？ – 2013-03-24 00:21:31

document.write - 這不是最好的變體。您需要創建一個更改全局變量crc的函數。在你需要動態創建鏈接Javascript後，請參閱此處的示例http://stackoverflow.com/questions/9831074/dynamically-create-link-javascript – 2013-04-02 02:03:01

這與vn_grv簡單的功能組合可能是有用的

var viewCurrPage = function() { 
     //console.log('Current page is '+crc); 
     document.getElementById('one').innerHTML = '<a href="process.php?page='+crc+'">Process page '+crc+'</a>'; 
    }; 
//Simply adding the corresponding div like: 
<div id="one"></div>

謝謝您的回答。此致敬禮，

來源

2013-03-24 01:19:19

Javascript中的全局作用域變量未按預期工作

回答

相關問題