PDFTron中的customElement

Question

我正在尝试添加一个复选框，上面写着："Enable Snap：[]“。如果用户单击复选框，我想检查复选框是否已选中。但我得到的错误如下: document.getElementById(...)为空。

代码如下：

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

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

Answer 1

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