customElement in PDFTron

Question

我正在尝试添加复选框，上面写着："启用捕捉：[]"；。如果用户点击该复选框，我想检查该复选框是否被选中。但我得到的错误是：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;
}
});
});

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

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