Javascript变量中的全局范围未按预期工作答案

【问题标题】：Global Scope in Javascript Variable Not working as expectedJavascript变量中的全局范围未按预期工作
【发布时间】：2013-03-19 02:49:44
【问题描述】：

<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) 的最简单版本。我一直在研究一个项目，该项目需要通过 url 将 pageNum（当前 pdf 页码）变量传递给另一个脚本进行处理。但问题是我无法在 renderPage 函数之外检索 pageNum 值。我认为这是 Javascript 变量范围的问题，但看不到我尝试通过 crc 变量或通过 document.getElementById('elNum').value 提取有什么问题... （请参阅 document.write ('Current page is '+crc); 脚本末尾的行和第 8 行中的字段，了解我是如何尝试检索该值的）。

任何人都可以给我任何关于我做错了什么的线索吗？测试页在这里 (http://jsbin.com/pdfjs-prevnext-v2/2091/edit)

注意：我已经看到有关此主题的其他问题，但这似乎是一个奇怪的案例。真的需要一些帮助，希望其他人将来会需要它。

【问题讨论】：

标签： javascript variables pdf.js global-scope

【解决方案1】：

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();
    }

【讨论】：

是的，谢谢你的回答，太好了！但我不知道如何通过 url 将变量 crc 传递到另一个页面进行处理，例如： document.write('Page to process是'+crc+'');有什么想法吗？
document.write - 这不是最好的变体。您需要创建一个更改全局 var crc 的函数。在您需要动态创建链接 Javascript 后，请参阅此处以获取示例 stackoverflow.com/questions/9831074/…

【解决方案2】：

这个，结合 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>

感谢您的回答。最好的问候，

【讨论】：