I'm trying to create a sample epub file that I can read in iBooks that will contain interactive content that iBooks will access via localStorage. I am able to get the localStorage piece working on the browser aok in chrome and firefox (not IE).
I noted that the localStorage javascript bit does not work when the files have *.xhtml extensions, only *.html extensions.
I am able to zip up the html, opf and ncx and get an epub that I can read in digital editions and only throw epubcheck errors related to javascript stuff.
I first tried importing this to iBooks, and I could read it aok, but the form was not interactive. Then I googled and found a post saying that it need to to be in an iFrame, which I did. I was then able to enter text into the form, but the local storage bit did not work.
Here are the 2 relevant html files:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
</head>
<body onLoad="writeStoredData( 'storedName' );" >
<div epub:type="chapter">
<h1>An HTML5 Ebook Sample</h1>
<p> A simple html5 form that uses local storage to hold user input info</p>
<ul><li>Does a device retain the info when the user moves from page to page? </li>
<li>When the device is turned off and on?</li>
</ul>
<p>In this simple form, the body has an onLoad attribute that calls a function to load the "name" from local storage. When the user enters input from a form the value is updated. When the user closes the page and opens it again the value is still there.</p>
<br/>
<div class="formContainer">
<iframe class="content" src="form.html"></iframe>
</div>
<div id="storedName"></div>
<p>Go to <a href="ebook-sample-pg2.html">page 2</a>
</p>
</div>
<script>
function writeStoredData( id ){
var storedNameDiv = document.getElementById(id);
storedNameDiv.innerHTML = "<p>The stored name is: <span class='selected'>" + localStorage.getItem('somename') + "</span></p>";
}
</script>
</body>
</html>
and the form: (this has the function that writes to localStorage)
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Epub3 Test Input Form</title>
</head><body>
<form>
Please enter your name: <input type="text" id="nameInput"/>
<input type="submit" value="enter" onClick="writeLocal();" onSubmit="window.location.reload()"/>
</form>
<script>
function writeLocal(){
var submittedName = document.getElementById('nameInput').value;
// calling it 'somename' to indicate user defined key
localStorage.setItem('somename', submittedName);
writeStoredData( 'storedName' );
}
function writeStoredData( id ){
var storedNameDiv = document.getElementById(id);
storedNameDiv.innerHTML = "<p>The stored name is: <span class='selected'>" + localStorage.getItem('somename') + "</span></p>";
}
</script>
</body></html>
and here is the manifest from the content.opf file:
<manifest>
<item id="js" href="javascript/ebook-test.js" media-type="text/javascript"/>
<item href="form.html" id="form1" media-type="application/xhtml+xml" properties="scripted"/>
<item href="ebook-sample.html" id="page1" media-type="application/xhtml+xml" properties="scripted"/>
<item href="ebook-sample-pg2.html" id="page2" media-type="application/xhtml+xml" properties="scripted"/>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
<item id="toc" properties="nav" href="toc.xhtml" media-type="application/xhtml+xml"/>
</manifest>
The bit written by javascript never appears at all. My next step is to try to create a file in iBooks Author, but was hoping to be able to do this with epub. I know that iBooks should be able to do this stuff, as most of the googling I did brought up tutorials for iBooks Author.
Also, I tried various things with the javascript; most of the examples I saw had the code in a tag at the bottom of the html file, but I tried in a separate *.js file, and in the head tag, made no difference.
Any help greatly appreciated. bp
You can use contenteditable it will be work. Remove the input tag
localStorage
has been disabled in iBooks by Apple, hence you cannot hope to have your code running from within an EPUB rendered by it.