ios下epub js阅读

使用 Vue 和 epub.js 制作电子书阅读器

ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件,所以很久之前就想折腾一下,自己开发一个 ePub 电子书阅读器.这两天趁着有空,做了一个简单的阅读器.虽然还有些 bug,但基本功能算是齐全了.自己开发的有很多好处,以后只要稍微修改一下,就可以实现导出 HTML 或者导出 Markdown 的功能,方便保存读书笔记,这一点比大多数软件好用多了. epub

iOS下JS与OC互相调用（六）--WKWebView + WebViewJavascriptBridge

上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用的.WKWebView 下使用WebViewJavascriptBridge与UIWebView 大同小异.主要是示例化的类不一样,一些与webView 相关的API调用不一样罢了. WKWebView 下使用WebViewJavascriptBri

iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge

WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以及之前,该库只有一个类和一个js 的txt文件,所以旧版本的WebViewJavascriptBridge 是非常容易理解的.而最新版的WebViewJavascriptBridge因为也要兼容WKWebView,所以里面也加入了两个新的类,一开始看的时候,会被它里面负责的逻辑吓到,其实仔细越多是非

iOS下JS与OC互相调用（四）--JavaScriptCore

前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了.它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下,提供了简单快捷的方式与JavaScript交互. 关于JavaScriptCore的使用有两篇很好的文章: NSHipster中文版的JavaScriptCore iOS7 新JavaScriptCore框架入门介绍看了上述两篇文章,对JavaScriptCore应该已经基本了解了.我就简要介

iOS下JS与OC互相调用（一）--UIWebView 拦截URL

最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1.在JS 中做一次URL跳转,然后在OC中拦截跳转.(这里分为UIWebView 和 WKWebView两种,去年因为还要兼容iOS 6,所以没办法只能采用UIWebView来做.) * 2.利用WKWebView 的MessageHandler. * 3.利用系统库JavaScriptCore,来

iOS下JS与原生OC互相调用(总结)

这是去年总结的一篇文章,也一并先放到这个目录下好了. iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇方式一第一种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理. 我写了一个简单的HTML网页和一个btn点击事件用来与原生OC交互,HTML代码如下: <html> <header> <meta http-equiv=&qu

iOS下原生与JS交互(总结)

iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇(我自己用的方式二,简单方便) 方式一第一种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理.我写了一个简单的HTML网页和一个btn点击事件用来与原生OC交互,HTML代码如下: <html> <header> <meta http-equiv="Content-Ty

JS判断是IOS还是Android以及如何解决h5打包后在ios下内容与状态栏重叠问题

h5打包后在ios下内容与状态栏重叠问题: 1:知道设备的类型: var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端上面的isA

epub.js的使用

epub.js的使用 npm安装 npm install epubjs epub阅读器开发 ePub电子书解析和渲染生成Book对象 this.book = new Epub(DOWNLOAD_URL) 通过Book.renderTo生成Rendition对象 this.rendition = this.book.renderTo('read', { width: window.innerWidth, height: window.innerHeight, method: 'default'

如何在webapp中做出原生的ios下拉菜单效果

github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iosselect正是为统一下拉菜单样式而生我们以IOS下select的交互和样式为蓝本,开发了这一组件先看效果: 特点可以做到0依赖,只需引用一个js和css即可,样式可自己定制,也可使用默认样式文件说明 src------iosselect基于iscroll5开发,在这个文件夹下可以看到iscrol

ios下fixed回复框bug的解决方案

前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中间去. 后来才知道这是ios下一个普遍的bug,所以我决定把原因和解决方案整理一下,以方便后人. 网上有的人说用那个iscroll.js来解决,不过那样会出现很多样式上的冲突,而且为了一个fixed的bug就动用一个js,未免有点大材小用了. 原因 ios下面,软键盘唤起后,页面的 fixed 元素

Cordova webapp实战开发：（6）如何写一个iOS下获取APP版本号的插件？

上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的学习如何获取iOS当前版本号学习iOS下插件类的编写学习iOS下插件的配置学习iOS下插件的调用主要内容 APP中[检查更新]显示当前版本号插件类的编写在上一篇介绍Andorid插件时我们贴出了很多源码,这里也直接贴出代码,首先是iOS下插件的代码. 我们在Plugins下新建两个文件,一个头文件

iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下的 Fixed + Input 调用键盘的时候fixed无效问题". 案例如下 <body>  <header>这里是头部</header>  <section&g

React Native在Windows下修改js代码后reload无效

iOS下因为有watchman这个插件,所以启动很快(npm start),而Windows下则非常慢,最要命的是遇到了修改js文件后,点击reload居然一直是请求的缓存bundle,泪崩... 后来找到一篇文章,解决了这个问题,就是说超时导致的,但是超时的时候没有反馈错误,原因不明.解决方案就是延长超时时间: //\node_modules\node-haste\lib\FileWatcher\index.js// 修改MAX_WAIT_TIME的值为360000 //找到如下代码key

ios下Safari无法触发click事件的处理

ios下的Safari真是傲娇啊,坑好多. 首先上代码 <!DOCTYPE html> <html> <head> <title>122</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"&

解决ios下的微信打开的页面背景音乐无法自动播放

后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了微信/易信在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监听这个事件来触发的.那有个坑就是如果微信已经ready了,但还没执行到你监听这个ready事件的代码,那么你的监听是没用的,所以最理想的情况是,监听的js放在head前面(放在css外链之前),确保最新执行,切记!切记!. ·另一个坑就是,本文的解决方案只适合一开始就播放的背景音乐.如果你是做那种

指尖下的js ——多触式web前端开发之一：对于Touch的处理

指尖下的js ——多触式web前端开发之一:对于Touch的处理水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感,因为正是他们(而不是水果)让iOS的世界变的丰富多彩.然而对于我们这些以web为自己事业核心的程序员来说,这种让人欲罢不能的多触式体验似乎跟我们关系不大,因为浏览器那一小块地方就是我们和用户的全部交集了.而许多网站为了让iOS的用

解决IOS下不支持fixed的问题

我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focus的时候让fixed块position变为relative,这是最简单的处理方法. 下面是我的小demo <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf

web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

1.现象可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意滚动页面的话,会发现原本fixed的搜索框跟着文档一起滚动了. 再仔细观察ios下的一些特点,ios为了让input垂直居中,甚至还滚动了滚动条,原本看不到的上半段产品的内容也漏出来了. 2. 参考别人的解决方法在网上搜索过后,大部分都是转载的这一篇文章,甚至配图都是拿别人原来的: http://

【epub.js|翻译|原创】开源中间件epub.js的使用及其中文文档

epub是最流行的电子书规范之一,网络上对于Java Web有不少合适的方法来解析和呈现,但是关于epub.js的介绍比较少(尽管github上已经2K星了),更多的是概念性的内容,如: epub.js是支持跨多个设备的,在浏览器端渲染EPUB文件的JavaScript库,提供通用的电子书功能界面(如渲染.持久和分页)不需要开发专用的应用程序或插件. 具体用法因人而异,在此我介绍结合React使用的案例: ---2017.11.22---更新了ePubReader的用法--- 这是epub.js

巴特西