天天看点

ibooks的epub书使用input

环境:ios8,ibooks,chrome43

需要做个epub电子书,页面带有输入框,但是直接添加<input>节点是不可编辑的,这还挺麻烦的,搜索了下bing/yahoo(百度没搜到),说是使用iframe+html实现,

但是基于webkit的chrome不支持本地的iframe数据交互(http://blog.csdn.net/dragoo1/article/details/47304335)

于是采用动态创建iframe方法,如下

chapter-001.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<html xml: xmlns="http://www.w3.org/1999/xhtml" xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title/>
<meta name="viewport" content="width=960, height=640"/>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript" src="quiz1.js" />
</head>
<body>
<div id="div1">
</div>
</body>
</html>
           

quiz1.js

$(document).ready(function() {
        var ifr_doc;
        var iframe = document.createElement('iframe');
        var ifr = document.body.appendChild(iframe);
        ifr_doc = ifr.contentWindow.document;

        ifr.frameborder = '1px';
        ifr.height = '100px';
        ifr.width = '200px';
        ifr.style.display = 'inline';

        var loadjs = "<html><body>Please enter your name: <input type=\"text\" id=\"nameInput\"/></body></html>";

        ifr_doc.open();
        ifr_doc.write(loadjs);
        ifr_doc.close();
});
           

jquery.js就从网上下个吧。。。

参考:

http://stackoverflow.com/questions/14552474/ibooks-is-it-possible-to-use-localstorage-when-importing-a-epub-file

继续阅读