JavaScript 函数未在页面加载时运行

Question

我正在尝试调整一个 JS 文件，该文件将来自 Google 电子表格的 JSON 数据解析为用于将标签打印到 Dymo 打印机的格式。脚本如下所示：

//----------------------------------------------------------------------------
//
//  $Id: GoogleSpreadSheet.js 38773 2015-09-17 11:45:41Z nmikalko $ 
//
// Project -------------------------------------------------------------------
//
//  DYMO Label Framework
//
// Content -------------------------------------------------------------------
//
//  DYMO Label Framework JavaScript Library Samples: 
//    Print mulltiple labels using Google Spreadsheet as a data source
//
//----------------------------------------------------------------------------
//
//  Copyright (c), 2010, Sanford, L.P. All Rights Reserved.
//
//----------------------------------------------------------------------------



(function() {
  var label;
  var labelSet;

  function onload() {
    var printButton = document.getElementById('printButton');
    var printersSelect = document.getElementById('printersSelect');

    function createLabelSet(json) {
      console.log('starting to parse the JSON for the labels');
      var labelSet = new dymo.label.framework.LabelSetBuilder();

      for (var i = 0; i < json.length; ++i) {

        var assetID = assetID[i];

        console.log(assetID.id);


        var assetID = assetID[i];
        var staffName = staffName[i];
        var serialNumber = serialNumber[i];
        var assetTag = assetTag[i];

        var address = assetID + '\n' + staffName + '\n' + serialNumber + '\n' + assetTag;

        var record = labelSet.addRecord();
        record.setText("Address", address);
      }

      return labelSet;
    }

    function loadSpreadSheetDataCallback(json) {
      labelSet = createLabelSet(json);
    };

    window._loadSpreadSheetDataCallback = loadSpreadSheetDataCallback;

    function loadSpreadSheetData() {
      removeOldJSONScriptNodes();

      var script = document.createElement('script');

      console.log('starting to create the new elements');

      script.setAttribute('src', 'getLabelsJSON.php?');
      script.setAttribute('id', 'printScript');
      script.setAttribute('type', 'text/javascript');
      document.documentElement.firstChild.appendChild(script);

      console.log(script);
    };

    function removeOldJSONScriptNodes() {
      var jsonScript = document.getElementById('printScript');
      if (jsonScript)
        jsonScript.parentNode.removeChild(jsonScript);
    };
    // create address label xml
    function getAddressLabelXml() {

      var labelXml = '<?xml version="1.0" encoding="utf-8"?>\
                            <DieCutLabel Version="8.0" Units="twips">\
	                            <PaperOrientation>Landscape</PaperOrientation>\
	                            <Id>Address</Id>\
	                            <PaperName>30252 Address</PaperName>\
	                            <DrawCommands>\
		                            <RoundRectangle X="0" Y="0" Width="1581" Height="5040" Rx="270" Ry="270" />\
	                            </DrawCommands>\
	                            <ObjectInfo>\
		                            <AddressObject>\
			                            <Name>Address</Name>\
			                            <ForeColor Alpha="255" Red="0" Green="0" Blue="0" />\
			                            <BackColor Alpha="0" Red="255" Green="255" Blue="255" />\
			                            <LinkedObjectName></LinkedObjectName>\
			                            <Rotation>Rotation0</Rotation>\
			                            <IsMirrored>False</IsMirrored>\
			                            <IsVariable>True</IsVariable>\
			                            <HorizontalAlignment>Left</HorizontalAlignment>\
			                            <VerticalAlignment>Middle</VerticalAlignment>\
			                            <TextFitMode>ShrinkToFit</TextFitMode>\
			                            <UseFullFontHeight>True</UseFullFontHeight>\
			                            <Verticalized>False</Verticalized>\
			                            <StyledText>\
				                            <Element>\
					                            <String>DYMO\
                                        828 San Pablo Ave Ste 101\
                                        Albany, CA 94706-1678</String>\
                                                            <Attributes>\
                                                                <Font Family="Arial" Size="12" Bold="False" Italic="False" Underline="False" Strikeout="False" />\
                                                                <ForeColor Alpha="255" Red="0" Green="0" Blue="0" />\
                                                            </Attributes>\
                                                        </Element>\
                                                    </StyledText>\
                                                    <ShowBarcodeFor9DigitZipOnly>False</ShowBarcodeFor9DigitZipOnly>\
                                                    <BarcodePosition>AboveAddress</BarcodePosition>\
                                                    <LineFonts>\
                                                        <Font Family="Arial" Size="12" Bold="False" Italic="False" Underline="False" Strikeout="False" />\
                                                        <Font Family="Arial" Size="12" Bold="False" Italic="False" Underline="False" Strikeout="False" />\
                                                        <Font Family="Arial" Size="12" Bold="False" Italic="False" Underline="False" Strikeout="False" />\
                                                    </LineFonts>\
                                     </AddressObject>\
                                     <Bounds X="332" Y="150" Width="4455" Height="1260" />\
                                  </ObjectInfo>\
                             </DieCutLabel>';
      return labelXml;
    }

    function loadLabel() {
      // use jQuery API to load label
      //$.get("Address.label", function (labelXml) {
      label = dymo.label.framework.openLabelXml(getAddressLabelXml());
      // }, "text");
    }

    // loads all supported printers into a combo box 
    function loadPrinters() {
      var printers = dymo.label.framework.getLabelWriterPrinters();
      if (printers.length == 0) {
        alert("No DYMO LabelWriter printers are installed. Install DYMO LabelWriter printers.");
        return;
      }

      for (var i = 0; i < printers.length; ++i) {
        var printer = printers[i];
        var printerName = printer.name;

        var option = document.createElement('option');
        option.value = printerName;
        option.appendChild(document.createTextNode(printerName));
        printersSelect.appendChild(option);
      }
    }

    // prints the label
    printButton.onclick = function() {
      try {
        if (!label)
          throw "Label is not loaded";

        if (!labelSet)
          throw "Label data is not loaded";

        label.print(printersSelect.value, '', labelSet);

        //                var records = labelSet.getRecords();
        //                for (var i = 0; i < records.length; ++i)
        //                {
        //                    label.setObjectText("Address", records[i]["Address"]);
        //                    var pngData = label.render();
        //
        //                    var labelImage = document.getElementById('img' + (i + 1));
        //                    labelImage.src = "data:image/png;base64," + pngData;
        //                }
      } catch (e) {
        alert(e.message || e);
      }
    };

    loadLabel();
    loadSpreadSheetData();
    loadPrinters();

  };

  function initTests() {
    if (dymo.label.framework.init) {
      //dymo.label.framework.trace = true;
      dymo.label.framework.init(onload);
    } else {
      onload();
    }
  }

  // register onload event
  if (window.addEventListener)
    window.addEventListener("load", initTests, false);
  else if (window.attachEvent)
    window.attachEvent("onload", initTests);
  else
    window.onload = initTests;

})();

DYMO.Label.Framework 位于：

http://www.labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.2.0.2.js

我需要 createLabelSet(json) 运行，因为它会在循环中解析 JSON，但这似乎没有运行。我添加了一个日志条目：

console.log('starting to parse the JSON for the labels');

但我在浏览器控制台中没有看到这个。我对 JavaScript 还很陌生，所以不太清楚为什么这个函数在页面加载时没有运行？

编辑：

将最后一行从}()); 更改为})();，但在控制台中仍然没有得到任何东西——不是应该出现的starting to parse the JSON for the labels 条目。

Answer 1

您没有看到预期输出的原因是因为您的 onload() 函数从未被调用。有几种方法可以让该功能在页面加载时运行； this SO answer 很好地描述了其中一些。

例如，将这一行添加到代码中会在页面加载时执行onload() 函数：

window.addEventListener("load", onload, false);

MDN 有一个load 事件的good quick overview，如果你想继续阅读的话。