环境: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