1

我正在尝试创建一个可以在 iBooks 中阅读的示例 epub 文件,其中包含 iBooks 将通过 localStorage 访问的交互式内容。我可以在 chrome 和 firefox(不是 IE)中让 localStorage 片段在浏览器上正常工作。

我注意到当文件具有 *.xhtml 扩展名,只有 *.html 扩展名时,localStorage javascript 位不起作用。

我能够压缩 html、opf 和 ncx 并获得一个我可以在数字版本中阅读的 epub,并且只抛出与 javascript 相关的 epubcheck 错误。

我首先尝试将其导入 iBooks,并且可以正常阅读,但表单不是交互式的。然后我用谷歌搜索,发现一个帖子说它需要在 iFrame 中,我做到了。然后我可以在表单中输入文本,但本地存储位不起作用。

以下是 2 个相关的 html 文件:

<?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>

和形式:(这有写入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>

这是 content.opf 文件中的清单:

  <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>

javascript编写的位根本不会出现。我的下一步是尝试在 iBooks Author 中创建一个文件,但希望能够使用 epub 来执行此操作。我知道 iBooks 应该能够做到这一点,因为我所做的大部分谷歌搜索都为 iBooks Author 提供了教程。

另外,我用 javascript 尝试了各种方法;我看到的大多数示例都在 html 文件底部的标记中包含代码,但我尝试在单独的 *.js 文件中,并且在 head 标记中,没有任何区别。

非常感谢任何帮助。bp

4

2 回答 2

0

localStorage已被 Apple 在 iBooks 中禁用,因此您不能希望您的代码从它呈现的 EPUB 中运行。

于 2014-01-30T22:57:16.693 回答
-2

您可以使用 contenteditable 它将起作用。删除输入标签

于 2013-02-11T12:49:18.360 回答