window.load event: works in editor but not in viewer

jrv · 02-14-2021, 10:18 PM

I created a simple .epub page below using the calibre editor. In the calibre editor (ebook-edit) preview the code runs as I expect, with both text items appended to the <p> tag. In atril document viewer the code runs as I expect. In the calibre viewer (ebook-viewer) the first event fires and the text is appended but the second does not seem to fire. I tried different formulations to catch the window.load event, but none worked. I need to use the window.load event because I need to wait for some referenced code to load. I am new to programming epub files, so this may be the result of a misunderstanding on my part. Is this a bug in the ebook-viewer which I should report or some error on my part? I am running calibre version 5.10.1 on debian bullseye, linux 5.10.0-1-amd64. I found the same behavior using calibre on ubuntu.

JR

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>calibre onload</title>
  <script><![CDATA[
    document.addEventListener('DOMContentLoaded', (event) => {
      var txt = document.createTextNode(' This text was added to the <p> in the DOMContentLoaded event.');
      document.getElementById('the-content').appendChild(txt);
    } );
    window.onload = (event) => {
    var txt = document.createTextNode(' This text was added to the <p> in load event.');
    document.getElementById('the-content').appendChild(txt);
  }
  ]]></script>
</head>
<body>
  <h1>calibre onload</h1>
  <p id="the-content">static content.</p>
</body>
</html>

kovidgoyal · 02-14-2021, 10:51 PM

dont use window.load use DOMContentLoaded

jrv · 02-15-2021, 10:15 AM

Quote:

Originally Posted by kovidgoyal

dont use window.load use DOMContentLoaded

Thank you. DOMContentLoaded and window.onload (my typo in previous post) are semantically different (https://javascript.info/onload-ondom...#window-onload). DOMContentLoaded occurs after the DOM is loaded but before external files have loaded. I want to include an external (to the page, but internal to the .epub) javascript file using:

Code:

<script src="javascript/tabs.js"></script>

There is a function in the javascript function that is called to initialize the page, so window.onload is semantically the right place to call it. The initialization references one or more elements by id and is custom to each page. I also would prefer not having to include the contents of the included .js file in each .html file; it is common code that would have to be repeated on each page.

Is it correct calibre ebook-viewer does not support this DOM event? Is there an event that is semantically similar, i.e. after loading all resources, that could be used instead?

JR

kovidgoyal · 02-15-2021, 10:27 AM

Yeah there is no window.onload in the viewer. I dont understand what your issue is. If you want to call some JS function in an external script, just put the code that is calling it after the external script tag, since you are not marking the script as async, it will be loaded before the code using it is called.

kovidgoyal · 02-15-2021, 10:32 AM

And there I added a load event for you, since its harmless. https://github.com/kovidgoyal/calibr...00b8c809d32ef9

jrv · 02-15-2021, 01:54 PM

Quote:

Originally Posted by kovidgoyal

I dont understand what your issue is. If you want to call some JS function in an external script, just put the code that is calling it after the external script tag, since you are not marking the script as async, it will be loaded before the code using it is called.

Thanks for looking at this. I made a new test (below) to try to implement what I think you suggested. In the ebooks editor it works like I hoped. In atril document viewer it works like I hoped. In ebook-viewer I get:

Code:

$ ebook-viewer calibre_onload.epub 
ERROR: clbr://internal.sandbox/book/__index__:2: Uncaught ReferenceError: accessFromImported is not defined

To me it looks as though the immediate script (below the <p> tag) is executed before the script from the imported file gets a chance to define the function.

JR

start.xhtml

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>calibre call initialization function</title>
  <script src="imported.js"></script>
</head>
<body>
  <h1>calibre call initialization function</h1>
  <p id="access-from-imported">static content for imported.</p>
  <script><![CDATA[
  accessFromImported();
  ]]></script>
</body>
</html>

imported.js

Code:

function accessFromImported() {
  document.getElementById( "access-from-imported" ).appendChild( document.createTextNode( " added by accessFromImported" ) );
}

kovidgoyal · 02-15-2021, 10:15 PM

oh yeah i forgot the viewer loads all scripts asynchronously. Well either use the newly added window.load event or have your page specific code set a callback on the window object and your common js code load it on DOMContentloaded event.

02-14-2021, 10:18 PM	#1
jrv Junior Member Posts: 3 Karma: 10 Join Date: Feb 2021 Device: none	window.load event: works in editor but not in viewer I created a simple .epub page below using the calibre editor. In the calibre editor (ebook-edit) preview the code runs as I expect, with both text items appended to the <p> tag. In atril document viewer the code runs as I expect. In the calibre viewer (ebook-viewer) the first event fires and the text is appended but the second does not seem to fire. I tried different formulations to catch the window.load event, but none worked. I need to use the window.load event because I need to wait for some referenced code to load. I am new to programming epub files, so this may be the result of a misunderstanding on my part. Is this a bug in the ebook-viewer which I should report or some error on my part? I am running calibre version 5.10.1 on debian bullseye, linux 5.10.0-1-amd64. I found the same behavior using calibre on ubuntu. JR Code: <?xml version='1.0' encoding='utf-8'?> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>calibre onload</title> <script><![CDATA[ document.addEventListener('DOMContentLoaded', (event) => { var txt = document.createTextNode(' This text was added to the <p> in the DOMContentLoaded event.'); document.getElementById('the-content').appendChild(txt); } ); window.onload = (event) => { var txt = document.createTextNode(' This text was added to the <p> in load event.'); document.getElementById('the-content').appendChild(txt); } ]]></script> </head> <body> <h1>calibre onload</h1> <p id="the-content">static content.</p> </body> </html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Spell Checker window on top of Editor window	Calibre-Fan	Editor	3	01-30-2016 11:48 AM
Window Editor Resizing	Crafter	Editor	4	02-13-2015 02:57 AM
Editor Window settings	BetterRed	Editor	17	04-18-2014 04:51 AM
Kindle DX Homebrew - Booklet&AWT Event Hook works, a step forward	DairyKnight	Kindle Developer's Corner	11	11-24-2010 10:52 AM
Request event viewer	Franky	enTourage Archive	0	04-29-2010 09:56 AM

02-14-2021, 10:51 PM	#2
kovidgoyal creator of calibre Posts: 43,951 Karma: 22669822 Join Date: Oct 2006 Location: Mumbai, India Device: Various	dont use window.load use DOMContentLoaded

02-15-2021, 10:27 AM	#4
kovidgoyal creator of calibre Posts: 43,951 Karma: 22669822 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Yeah there is no window.onload in the viewer. I dont understand what your issue is. If you want to call some JS function in an external script, just put the code that is calling it after the external script tag, since you are not marking the script as async, it will be loaded before the code using it is called.

02-15-2021, 10:32 AM	#5
kovidgoyal creator of calibre Posts: 43,951 Karma: 22669822 Join Date: Oct 2006 Location: Mumbai, India Device: Various	And there I added a load event for you, since its harmless. https://github.com/kovidgoyal/calibr...00b8c809d32ef9

02-15-2021, 10:15 PM	#7
kovidgoyal creator of calibre Posts: 43,951 Karma: 22669822 Join Date: Oct 2006 Location: Mumbai, India Device: Various	oh yeah i forgot the viewer loads all scripts asynchronously. Well either use the newly added window.load event or have your page specific code set a callback on the window object and your common js code load it on DOMContentloaded event.

Advert

Advert