iOS Safari阅读模式研究

原创 2016年03月23日 00:08:58

这是一篇在2013年准备的资料,现在分享出来,供有需要的同学参考。

要点

(1) 阅读模式的检测
在frame加载完成后,触发一个timer来检测是否可以使用阅读模式。检测的方式是使用JavaScriptCore framework的接口执行一段JS脚本,然后取JS中属性值来判断是否可以进入阅读模式。如果当前页面可以进入阅读模式,将在地址栏显示阅读模式切换按钮。

(2) 阅读模式的执行
  当用户点击阅读模式切换按钮时,会依次执行:

i. 执行阅读模式检查脚本,判断目前是否可以进入阅读模式。
ii. 创建WebView并加载阅读模式页面的HTML页面,iPad下为Reader~iPad.html .
iii. 在页面允许修改Window对象的位置,执行阅读模式处理脚本。
v. 显示页面

(3) 阅读模式页面的控制
 Safari实现了几个类来处理阅读模式的显示和操作。

主要涉及的类

classes
TabDocument代表了一个页签下的页面文档,这里有页面的主要控制操作和阅读模式的控制操作(ReaderControllerDelegate)。
BrowserReaderView是负责阅读模式页面显示的类。

阅读模式检测的序列图

下面是一个在正常页面加载后触发TabDocument_readerAvailabilityDetectionTimer的序列图:
sequence #1

除此之外,另外两个函数-[BrowserController stopFromAddressView:]-[TabDocument _progressDidStall] 也会触发阅读模式检测的执行。

当Timer触发后会开始真正执行脚本:
sequence #2

JSEvaluateScript,JSObject等都是JavaScriptCore framework提供的接口。

执行完成脚本,会执行回调函数-[TabDocument _didDetectReaderAvailability:]将把脚本中的ReaderArticleFinder.isReaderModeAvailable的值传入,再根据这个值判断是否要显示阅读模式按钮。

阅读模式的显示

当点击阅读模式按钮时,下图的2.1是重新发起检测脚本的执行,步骤2.2则开始加载显示阅读模式。
sequence #3

WebView放出一个接口webView:didClearWindowObject:forFrame,允许用户修改全局对象, Safari就是在这个位置提前于页面真正加载就去执行阅读模式处理脚本,然后在页面加载完时会依据下面的写法,执行ReaderJS.loaded(),显示页面内容。

<body class="preloading"onload="ReaderJS.loaded();" onscroll="articleHasScrolled();">

ReaderJS就是阅读模式内容抽取脚本中的对象。

下面是执行阅读模式内容抽取的脚本执行过程:
sequence #4

*这是Apple关于webView:didClearWindowObject:forFrame的说明:

Use this method to set custom properties on the window object before the page is actually loaded. Every time a frame loads or is reloaded all DOM properties are cleared from the window object so the new page has a fresh window object to use. If the page you are loading depends on specific window object properties to exist, they should be added at this point before any scripts are executed.

附上三个使用到文件,分别是:
Reader~ipad.html iPad下使用的阅读模式页面html文件
safari_reader_check.js 阅读模式检测JS脚本
safari_reader_clicked.js 阅读模式内容抽取JS脚本
到GitHub上查看,链接:iOSSafariReaderMode

参考

. 分析的过程记录

iOS Safari阅读模式分析过程

本文为Safari阅读模式分析过程记录,没有做很好的整理。详细看另外一篇.
  • HorkyChen
  • HorkyChen
  • 2016年03月23日 00:19
  • 4152

iOS Safari阅读模式研究

Safari阅读模式的三个要点: (1) 阅读模式的检测 (2) 阅读模式的执行 (3) 阅读模式页面的控制 这是一篇在2013年准备的资料,现在分享出来,供有需要的同学参考。...
  • HorkyChen
  • HorkyChen
  • 2016年03月23日 00:08
  • 4733

Safari 常用的全部快捷键

标签和网页导航快捷键 8 个 切换到下一个标签页 – Control+Tab 切换到上一个标签页 – Control+Shift+Tab 向下滚动一屏 – 空格 向上滚动一屏 – Shif...
  • fjy4328286
  • fjy4328286
  • 2013年10月24日 22:45
  • 3686

Safari插件机制研究(二) 插件的视图管理

Note:首先相对于WebKit官网的代码,iOS上的版本使用WAKView代替了NSView。 比如Mac OS中将PlatformWidget定义为 NSView*, 而在iOS中则是WAKVie...
  • HorkyChen
  • HorkyChen
  • 2013年06月06日 20:31
  • 3012

Safari插件机制研究(一)

Overview 在Safari里有一个单例对象WebPluginDatabase负责管理本地的插件,每个plugin对应一个WebBasePluginPackage,存放在plugins里...
  • HorkyChen
  • HorkyChen
  • 2013年06月05日 18:18
  • 4989

JavaScript中的Date对象在Safari与IOS中的“大坑”

最近小编在做一个会议室预定的功能,这个功能就像在买电影票时选择座位一样,看看会议室的哪个时间段空闲,有什么设备等等。由于我做的是APP,APP既要兼容Android,又要兼容IOS,刚开始的开发与调试...
  • u013067402
  • u013067402
  • 2016年05月30日 15:50
  • 10769

踩坑路上——IOS Safari浏览器下固定定位position:fixed带来的问题与解决方案

1.-webkit-overflow-scroll:touch; 2.使用其他布局方式
  • grsghh
  • grsghh
  • 2017年03月11日 14:37
  • 10869

ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等。 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动...
  • qq_31968791
  • qq_31968791
  • 2017年12月27日 09:30
  • 229

兼容 iOS 9 Safari 的应用跳转方案探索

很多做 web 开发的一定遇到过这种需求:点一个链接或按钮时,如果装了应用,就用该应用打开;没装的时候,iOS 跳 App Store 下载,Android 直接下载 apk 包。 在做读读日报的时候...
  • juner_ge
  • juner_ge
  • 2015年11月30日 16:09
  • 207

Safari杀手:iOS 版 Google Chrome 上手评测(视频)

谷歌Chrome浏览器在台式机和笔记本上一直是速度最快的,今天它正式登陆 App Store,这意味着 iOS 平台上苹果自家的 Safari 浏览器终于迎来了一个“杀手级”的竞争对手。另一方面广...
  • leiphone
  • leiphone
  • 2012年06月29日 14:25
  • 538
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS Safari阅读模式研究
举报原因:
原因补充:

(最多只允许输入30个字)