Javascript PDFTron中的自定义元素

我试图添加一个复选框，上面写着：“启用快照：[]。如果用户点击该复选框，我想检查该复选框是否被选中。但我得到的错误是：document.getElementById（…）为null

代码如下：

instance.setHeaderItems(header => {
    header.getHeader('toolbarGroup-Annotate').unshift({
        type: 'customElement',
        render: function() {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.name = 'snap-to-grid';
            checkbox.value = '1';
            checkbox.id = 'snap-to-grid';
            checkbox.onclick = function(evt) {
                alert(document.getElementById('snap-to-grid').checked);
            };
            return checkbox;
        }
    });
});

---

那么有没有办法知道复选框是否被选中？另外，如何在复选框之前添加一些文本？

WebViewer在您页面的iframe中运行。当我们渲染这些自定义按钮时，它们也在iframe中。要在您的案例中访问元素，首先需要获取iframe的文档。这应该对你有用

instance.setHeaderItems(header => {
    header.getHeader('toolbarGroup-Annotate').unshift({
      type: 'customElement',
      render: function() {
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'snap-to-grid';
        checkbox.value = '1';
        checkbox.id = 'snap-to-grid';
        checkbox.onclick = function(evt) {
          alert(instance.iframeWindow.document.getElementById('snap-to-grid').checked);
        };
        return checkbox;
      }
    });
  });

---

如果我点击带有铅笔图标的“工具”选项，该复选框将被重置（即未选中）。那么，当用户单击“工具”选项时，我是否可以使用任何事件，以便使用全局变量再次选中复选框？每次组件刷新时，我们都会调用此渲染函数。在控制该复选框的呈现时，您可以在自己的代码中保留复选框状态，这在本例中意味着在instance.setHeaderItems（）函数之外