取消对现有DB应用程序中不起作用的mirador查看器的打包集成

Question

我有一个应用程序，我正在将xslt生成的html转换为existDB，我想包括一个Mirador查看器。这个例子(为了我的目的进行了修改，如下所示(适用于静态html页面，如果我从现有的应用程序中生成html并将其保存为静态html文件，然后将其放入其中，它也可以正常工作。但是，如果我试图在我现有的应用程序中使用它，我会得到一个非常不稳定的查看器版本，其中任何与它交互的尝试都会导致它最终抛出一个错误(我将在下面的代码中显示(。缩小后的代码对故障排除没有特别的帮助，所以我想知道这是否是其他人遇到的情况，如果是的话，他们做了什么来解决它。代码的密切相关部分如下，使用github中的默认Harvard清单进行测试：

<div id="viewer" allowfullscreen="allowfullscreen">
<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
<div id="mirador"></div>
<script type="text/javascript">
const mirador = Mirador.viewer({
"id": "mirador",
"manifests": {
"https://iiif.lib.harvard.edu/manifests/drs:48309543": {
"provider": "Harvard University"
}
},
"windows": [
{
"loadedManifest": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
"canvasIndex": 2,
"thumbnailNavigationPosition": 'far-bottom'
}
]
});
</script>
</div>

我加载的错误如下：

TypeError: this.gridRef.current is null
value ThumbnailNavigation.js:35
React 2
unstable_runWithPriority scheduler.production.min.js:19
React 4
unstable_runWithPriority scheduler.production.min.js:19
React 4
Redux 68
Ks createPluggableStore.js:22
e MiradorViewer.js:20
viewer init.js:15
<anonymous> index:15
react-dom.production.min.js:209:194
React 9
unstable_runWithPriority scheduler.production.min.js:19
React 4
Redux 68
Ks createPluggableStore.js:22
e MiradorViewer.js:20
viewer init.js:15
<anonymous> index:15

并且任何与画布交互的尝试都会导致"；太多递归"；错误：

InternalError: too much recursion
c getScrollParent.js:27
G setupEventListeners.js:11
G mirador.min.js:2  -- THIS REPEATS 123 TIMES --
react-dom.production.min.js:209:194
React 9
os
payload
gi
Fa
Es
vc
gc
sc
Xo
unstable_runWithPriority scheduler.production.min.js:19
React 5
qo
Xo
Yo
nc
ya
o useControlled.js:38
we Tooltip.js:273
current Tooltip.js:306
(Async: setTimeout handler)
Oe Tooltip.js:305
React 12
s
p
v
v
st
it
ct
ht
L
F
Jt
Qt
unstable_runWithPriority scheduler.production.min.js:19
React 11
Xt
Zt
Kt
gt
un
es
bc
vc
gc
sc
Xo
unstable_runWithPriority scheduler.production.min.js:19
React 2
qo
Xo
W scheduler.production.min.js:17
onmessage scheduler.production.min.js:14
(Async: EventHandlerNonNull)
<anonymous> scheduler.production.min.js:13
Webpack 15
o
<anonymous>
o
<anonymous>
o
<anonymous>
o
<anonymous>
o
<anonymous>
o
<anonymous>
<anonymous>
<anonymous>
<anonymous>

Answer 1

也许我遇到了同样的问题。IMO，(我的(问题是(曾经(一种比赛条件，你必须确保你只在mirador完成初始化后才处理它。以下作品(对我来说(与mirador 2.7.0合作。

经过一些其他方法，我现在已经决定在iframe中加载mirador并发送消息：

我的主阅读视图页面work.html调用了一个现有的数据库模板template_work.html，该模板侦听关于mirador init完成的消息，然后调用函数miradorLoaded(第564ff行(：

<div id="parent">
<iframe title="Mirador" id="Mirador" src="viewer.html" allowfullscreen="" style="min-width: 99%;height:99%;"/>
</div>
<script type="text/javascript">
window.addEventListener('message', function(message){ if(message.data.type=="mirador.loaded"){ miradorLoaded(); } });
function miradorLoaded() {
/* here comes all the init stuff (see below) */
};
</script>

viewer.html类似地只调用template_viewer.html，其中导入mirador js文件，并在$(document).ready()函数中进行实际初始化：创建和配置mirador对象，并将消息发送回父对象(第95ff行(：

$(document).ready(function(){
MyObjects.myMirador = Mirador({
/* set mirador config according to docs */
});
// Binding to events happens in the parent html file (which includes the present file in an iframe).
MyObjects.myMirador.eventEmitter.subscribe('windowAdded', function(){
window.parent.postMessage({ type:'mirador.loaded' },"*");
});
});

这是主要的方法。上面提到的主/父模板中的miradorLoaded函数有很多事情要做：

• 绑定点击事件(在具有pageNo类的元素上，这是我的页码，它们包括一个属性data-canvas，用于保存该页面的画布(：
  • 打开带有mirador iframe的弹出窗口
  • 将mirador指向正确的图像/画布
  • 更新查看器弹出窗口的一些元素，如标题、按钮
• 在弹出窗口的关闭图标上绑定单击事件以再次关闭弹出窗口

function miradorLoaded() {
// Bind click event for opening viewer popup
$(document).on('click', ".pageNo", function(event){
event.preventDefault();                                                 
$(this).blur();
var $myMirador = document.getElementById('Mirador').contentWindow.MyObjects.myMirador;
var $windowID = $myMirador.saveController.slots[0].window.id;
// Configure viewer to go to the correct canvas
var $targetCanvasID =  $(this).attr('data-canvas');
$myMirador.eventEmitter.publish('SET_CURRENT_CANVAS_ID.'+ $windowID, $targetCanvasID);
// Update some values of the dialog popup window
$("#parent small").text($(this).attr('href'));         // update Viewer Heading
$("#parent div").attr('title', $(this).attr('href'));  // update Viewer Title
// Open the dialog window
$("#parent").dialog('open');                           // show Viewer with jquery-ui Dialog method
});
// Bind click event for closing the popup
$('#Mirador').contents().find("#close").on('click', function(){
$("#parent").dialog('close');
});
});

在我们的应用程序的情况下，还有更多的事情要做，导致各个函数中的代码比上面列出的要多得多：我们用viewer查询参数跟踪查看器状态(当查看器打开或转到不同的画布时更新，当调用具有此参数的URL时触发打开查看器(，我添加了一个"；同步"；按钮(将全文导航到观看者的当前画布(和"浏览"按钮；下载pdf"；按钮但我希望列出的内容足以让你继续。。。

这种方法可以在例如。https://id.salamanca.school/texts/W0034?format=html(但我们可能很快就会推出一个更新版本，它可能不再依赖mirador，而是(更轻量级的(tify查看器(。