iOS Safari阅读模式研究

简介: 这是一篇在2013年准备的资料,现在分享出来,供有需要的同学参考。要点(1) 阅读模式的检测 在frame加载完成后,触发一个timer来检测是否可以使用阅读模式。

这是一篇在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

参考

. 分析的过程记录

目录
相关文章
|
6天前
|
调度 iOS开发 开发者
iOS 中的并发编程模式:理解 GCD 和 Operation Queues
【4月更文挑战第19天】 在现代 iOS 应用开发中,有效地管理线程和并发是至关重要的。为了确保用户界面的流畅性和后台任务的高效运行,开发者需要掌握并发编程技术。本文深入探讨了两种主要的并发模式:Grand Central Dispatch (GCD) 和 Operation Queues。我们将分析它们的工作原理,比较它们的特点,并通过实际代码示例说明如何在 iOS 应用中实现高效的并发处理。通过本文,读者将获得在 iOS 平台上进行多线程开发的实用知识,以及如何根据不同的应用场景选择最合适的并发工具。
|
8月前
|
iOS开发
iOS 常用阅读软件打开书籍的转场动画
iOS 常用阅读软件打开书籍的转场动画
58 0
|
4月前
|
Web App开发 移动开发 Android开发
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
|
7月前
|
Web App开发 安全 JavaScript
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
51 0
|
7月前
|
Swift iOS开发
IOS 小说阅读《覆盖翻页》效果框架 DZMCoverAnimation
IOS 小说阅读《覆盖翻页》效果框架 DZMCoverAnimation
55 0
|
8月前
|
Web App开发 JavaScript iOS开发
iOS Safari 浏览器 100vh 带有滚动条解决方案
iOS Safari 浏览器 100vh 带有滚动条解决方案
454 0
|
9月前
|
开发工具 iOS开发 开发者
iOS 暗黑模式的适配总结
iOS 暗黑模式的适配总结
|
iOS开发
IOS 黑暗模式简单理解
IOS 黑暗模式简单理解
72 0
|
iOS开发
iOS多线程的初步研究-- dispatch同步
GCD提供两种方式支持dispatch队列同步,即dispatch组和信号量。
147 0
|
Web App开发 前端开发 JavaScript
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
319 0
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”