djvu.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!DOCTYPE html>
  2. <html>
  3. <header>
  4. <meta charset="utf-8">
  5. <script src="https://djvu.js.org/assets/dist/djvu.js"></script>
  6. <script src="https://djvu.js.org/assets/dist/djvu_viewer.js"></script>
  7. <style>
  8. #for_viewer {
  9. height: 80vh;
  10. width: 90vw;
  11. margin: 5vh auto;
  12. border: 1px solid black;
  13. }
  14. </style>
  15. </header>
  16. <body>
  17. <div id="for_viewer"></div>
  18. <script>
  19. // save as a global value
  20. window.viewer = new DjVu.Viewer();
  21. viewer.render(document.querySelector("#for_viewer"));
  22. {
  23. //?url=#page=
  24. let url = location.search.substring(5);
  25. let page = 1;
  26. let lhash = location.hash;
  27. if(lhash)
  28. page = parseInt(lhash.substring(6),10);
  29. viewer.loadDocumentByUrl(url,{"pageNumber": page,});
  30. }
  31. window.addEventListener('hashchange', function() {
  32. let page = 1;
  33. let lhash = location.hash;
  34. if(lhash)
  35. page = parseInt(lhash.substring(6),10);
  36. viewer.configure({pageNumber: page,});
  37. /*
  38. viewer.store.dispatch({
  39. type: DjVu.Viewer.ActionTypes.SET_NEW_PAGE_NUMBER_ACTION,
  40. pageNumber: page,
  41. shouldScrollToPage: true,
  42. });
  43. */
  44. });
  45. </script>
  46. </body>
  47. </html>