Javascript runs in Ibook and Calibre Editor but not Calibre Reader

vissidarte · 10-21-2021, 04:37 PM

I recently created a small demo file using Calibre editor. It contains javascript attached to "onmouseover" and also some javascript to change the css on some div elements.

All the javascript runs in the Calibre editor (and in a Safari as well) - both onmouseover and the div css events. Also RunCheck in the editor reports "no problems". I also modified the manifest and spine elements in metadata.opf so that "properties=scripted" as per W3C instructions. The files are posted at the bottom.

However, when i try to run the file in Calibre editor - NONE of the javascript works . If I run it in Mac Ibook - the div/css javascript works, but not the onmouseover events.

I am running calibre: 5.29.0 installed on a MacBook via home-brew.

1) Does Calibre Reader allow javascript? And if so, are there special settings to allow javascript - I checked preferences and couldn't find any?
2) My eventual goal is to have an SVG element that will respond to the users clicks and mouse movements with a popup, but I can't seem to get a simple alert box to be displayed! I presume that the onmouseover event isn't running because of some conflict with Ibooks own event handling mechanism. If so, how do I coax Ibook and Calibre reader to use my script rather than its own?

Spoiler:

kovidgoyal · 10-21-2021, 06:48 PM

Yes the viewer supports JS and you dont need any special properties to make it work. You cannot load jquery from a web url. Either dont use it or bundle it in the actual epub file.

vissidarte · 10-22-2021, 10:41 AM

Thank you for confirming that it is /supposed/ to work - but if the JS is supposed to work why does the start.xhtml file in the epub archive refuse to change the div color from blue to yellow /in the reader/?

It is clear the javascript works in the editor preview (divs turn from blue to yellow). it also works when the book is added to the library and the first page (content of the start.xhtml file) is converted to .jpg as the "default" book cover. The divs are yellow not blue in the displayed .jpg. BUT when I actually load the book into the calibre reader, the javascript does not execute and the divs stay blue.

vissidarte · 10-22-2021, 11:25 AM

--You cannot load jquery from a web url. Either dont use it or bundle it in the actual epub file.--

OK missed that part, I've put a local copy of jquery in the archive. The relevant portions of the EPUB archive now look like this, but I still get the same result: the javascript executes in the calibre Editor but not in the calibre Reader.

From start.xhtml
<head>
<title>Demo</title>
<script src="META-INF/jquery-3.5.1.min.js">
</script>
...
</head>

From metadata.opf:
<manifest>
<item href="start.xhtml" id="start" media-type="application/xhtml+xml" properties="scripted"/>
<item href="META-INF/jquery-3.5.1.min.js"
media-type="text/javascript"
properties="scripted"/>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
</manifest>

Is there something wrong with the above code? Does the js library have to also be added to the spine? Is the path name correct? (The META-INF path was the path name that showed up in the prompt when I entered the source attribute)?
I am running calibre on Big Sur. Is it possible that the reader is using features that are triggering Big Sur's security infrastructure whereas the editor is not?

kovidgoyal · 10-23-2021, 01:22 AM

You need to run your JS *after* the dom has loaded. A quick google will show you how to do that. And use the Inspector to debug your JS in the viewer, right click, choose inspector and open the console.

10-21-2021, 04:37 PM	#1
vissidarte Junior Member Posts: 3 Karma: 10 Join Date: Oct 2021 Device: none	Javascript runs in Ibook and Calibre Editor but not Calibre Reader I recently created a small demo file using Calibre editor. It contains javascript attached to "onmouseover" and also some javascript to change the css on some div elements. All the javascript runs in the Calibre editor (and in a Safari as well) - both onmouseover and the div css events. Also RunCheck in the editor reports "no problems". I also modified the manifest and spine elements in metadata.opf so that "properties=scripted" as per W3C instructions. The files are posted at the bottom. However, when i try to run the file in Calibre editor - NONE of the javascript works . If I run it in Mac Ibook - the div/css javascript works, but not the onmouseover events. I am running calibre: 5.29.0 installed on a MacBook via home-brew. 1) Does Calibre Reader allow javascript? And if so, are there special settings to allow javascript - I checked preferences and couldn't find any? 2) My eventual goal is to have an SVG element that will respond to the users clicks and mouse movements with a popup, but I can't seem to get a simple alert box to be displayed! I presume that the onmouseover event isn't running because of some conflict with Ibooks own event handling mechanism. If so, how do I coax Ibook and Calibre reader to use my script rather than its own? Spoiler: start.xhtml contents: <?xml version='1.0' encoding='utf-8'?> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script> <style> div { width: 60px; height: 60px; margin: 10px; background: blue; float: left; } </style> </head> <body> <h1 onmouseover="alert('h1 mouseover')">Hello world</h1> <div></div> <div></div> <script> $( "div" ).css( "border", "2px solid red" ) .css( "background", "yellow" ); </script> <svg xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="45" stroke-width="0" fill="black" onmouseover="alert('circle mouseover')" /> <a href="https://en.wikipedia.org/wiki/Orange"> <circle cx="50" cy="50" r="30" stroke="black" stroke-width="0" fill="orange" > <title>An orange circle</title> </circle> </a> </svg> </body> </html> metadata.opf contents: <?xml version='1.0' encoding='utf-8'?> <package xmlns="http://www.idpf.org/2007/opf" unique-identifier="uuid_id" version="2.0"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlnspf="http://www.idpf.org/2007/opf"> <dc:title>Demo</dc:title> <dc:creator opf:file-as="egfb" opf:role="aut">Unknown</dc:creator> <dc:identifier opf:scheme="calibre" id="calibre_id">d6a131e9-cd7e-443d-9969-d0b3e13f5a9b</dc:identifier> <dc:identifier opf:scheme="uuid" id="uuid_id">f551a057-f9c0-4741-be82-e6b860b5b1d2</dc:identifier> <dc:contributor opf:file-as="calibre" opf:role="bkp">calibre (5.29.0) [https://calibre-ebook.com]</dc:contributor> <dc:language>eng</dc:language> </metadata> <manifest> <item href="start.xhtml" id="start" media-type="application/xhtml+xml" properties="scripted"/> <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/> </manifest> <spine toc="ncx"> <itemref idref="start"/> </spine> <guide/> </package> Last edited by theducks; 10-22-2021 at 10:16 AM. Reason: spoilered

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Calibre editor e-reader html statusbar popup with css	ni_cc	Editor	5	03-15-2020 08:36 AM
Calibre runs in a loop	Poldi	Devices	4	09-29-2015 02:12 PM
Calibre runs on what o/s?	TdeV	Calibre	9	03-09-2014 03:33 AM
How to download iBook's JavaScript "ibook.js & fixedlayout sample"	Raja1205	ePub	1	09-03-2012 11:20 AM
Calibre runs 15sec. then disappears	intcon	Calibre	16	08-14-2011 11:13 AM

10-21-2021, 06:48 PM	#2
kovidgoyal creator of calibre Posts: 43,860 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Yes the viewer supports JS and you dont need any special properties to make it work. You cannot load jquery from a web url. Either dont use it or bundle it in the actual epub file.

10-22-2021, 10:41 AM	#3
vissidarte Junior Member Posts: 3 Karma: 10 Join Date: Oct 2021 Device: none	Thank you for confirming that it is /supposed/ to work - but if the JS is supposed to work why does the start.xhtml file in the epub archive refuse to change the div color from blue to yellow /in the reader/? It is clear the javascript works in the editor preview (divs turn from blue to yellow). it also works when the book is added to the library and the first page (content of the start.xhtml file) is converted to .jpg as the "default" book cover. The divs are yellow not blue in the displayed .jpg. BUT when I actually load the book into the calibre reader, the javascript does not execute and the divs stay blue.

10-22-2021, 11:25 AM	#4
vissidarte Junior Member Posts: 3 Karma: 10 Join Date: Oct 2021 Device: none	--You cannot load jquery from a web url. Either dont use it or bundle it in the actual epub file.-- OK missed that part, I've put a local copy of jquery in the archive. The relevant portions of the EPUB archive now look like this, but I still get the same result: the javascript executes in the calibre Editor but not in the calibre Reader. From start.xhtml <head> <title>Demo</title> <script src="META-INF/jquery-3.5.1.min.js"> </script> ... </head> From metadata.opf: <manifest> <item href="start.xhtml" id="start" media-type="application/xhtml+xml" properties="scripted"/> <item href="META-INF/jquery-3.5.1.min.js" media-type="text/javascript" properties="scripted"/> <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/> </manifest> Is there something wrong with the above code? Does the js library have to also be added to the spine? Is the path name correct? (The META-INF path was the path name that showed up in the prompt when I entered the source attribute)? I am running calibre on Big Sur. Is it possible that the reader is using features that are triggering Big Sur's security infrastructure whereas the editor is not?

10-23-2021, 01:22 AM	#5
kovidgoyal creator of calibre Posts: 43,860 Karma: 22666666 Join Date: Oct 2006 Location: Mumbai, India Device: Various	You need to run your JS after the dom has loaded. A quick google will show you how to do that. And use the Inspector to debug your JS in the viewer, right click, choose inspector and open the console.

Advert

Advert