ibooks的epub书使用input

最新推荐文章于 2024-05-09 09:53:51 发布

dragoo1

最新推荐文章于 2024-05-09 09:53:51 发布

阅读量1.3k

点赞数

分类专栏： epub 文章标签： ibooks epub input iframe chrome

本文链接：https://blog.csdn.net/dragoo1/article/details/47324871

版权

epub 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

环境：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:lang="zh-cn" 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