iOS Safari阅读模式研究

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

要点

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

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

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

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

主要涉及的类


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

阅读模式检测的序列图

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

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

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

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

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

阅读模式的显示

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

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

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

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

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

*这是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

参考

. 分析的过程记录

时间: 2024-09-02 00:10:59

iOS Safari阅读模式研究的相关文章

iOS Safari阅读模式分析过程

本文为Safari阅读模式分析过程记录,没有做很好的整理.最终的输出见另一篇iOS Safari阅读模式研究. 1. Break on evaluate   b JSC::evaluate(JSC::ExecState*, JSC::ScopeChainNode*, JSC::SourceCode const&, JSC::JSValue, JSC::JSValue*)   dump the source content from JSC::SourceCode Printing descrip

safari浏览器阅读模式在哪里

  在iPhone.iPad等中,Safari是浏览器是iOS自带的一款优秀浏览器,相比什么UC.QQ浏览器等体验更为出色,正是因为如此,果粉们基本很少使用第三方浏览器.今天,小编主要分享一个Safari浏览器小技巧,教大家Safari阅读模式怎么用,如何开启以及果粉很少注意的一些网. Safari阅读模式使用教程 Safari阅读模式怎么?先来说说Safari阅读模式在哪,如何开启? 1.在iPhone或iPad中打开 Safari 浏览器,然后打开一个网页,比如这里打开电脑百事网手机版,然后

Safari Private 模式下 localStorage 的问题

现如今好多浏览器都有「隐身模式」,Safari 管这叫「Private Browing」,国内各种牌子的套壳浏览器叫「无痕浏览」.私以为从命名上来说,倒是国内更中文一些. 这种模式下浏览网页踏雪无痕,雁过不留声.具体来说,与正常模式的区别是浏览器不会保存历史记录,没有页面缓存,所有本地数据也都是临时的,页面关闭后无法还原.譬如本文下面要讲到的 localStorage. 并不是说这种模式下绝对安全,服务器仍然对用户的浏览是有感知的.所以 IP 什么的依然可以追踪.这世界并不如我们天真设想般烂漫.

Office Web Apps中的触控阅读模式

作为Office 13预览版的一部分,微软在夏季公布了新版Office Web Apps应用,它允许用户在iOS的Safari和Windows 8的IE10中在线编辑文档.今天在微软的Office Web App博客中,微软展示了触控阅读模式.这一模式可以让用户在阅读和展示文档的时候变得更为简单,Office为触控设备准备了一个右侧的滑块,只要拖动滑块就可以向下移动阅读,包括Excel.PowerPoint组件也有类似的功能,特别是在阅读PPT的时候,还可以将展示内容和笔记分开展示.

iOS多线程的初步研究(七、八、九)-- dispatch对象-- dispatch队列-- dispatch源-- dispatch同步

七.iOS多线程的初步研究()-- dispatch对象 谈起iOS的dispatch(正式称谓是Grand Central Dispatch或GCD),不得不说这又是iOS(包括MacOSX)平台的创新,优缺点这里不讨论,只有当你使用时才能真正体会到.我们说dispatch函数的主要目的是实现多任务并发代码,那么要理解dispatch函数,先来了解dispatch对象的定义.   dispatch对象类型的部分定义,主要使用C语言的宏定义: <os/object.h>文件: #define

iOS多线程的初步研究(一、二、三)-- NSThread -- 锁-- NSRunLoop

一)iOS多线程的初步研究(一)-- NSThread 对于多线程的开发,iOS系统提供了多种不同的接口,先谈谈iOS多线程最基础方面的使用.产生线程的方式姑且分两类,一类是显式调用,另一类是隐式调用. 一.显示调用的类为NSThread.一般构造NSThread的线程对象可通过两种方式: 1. 初始化线程主方法: [NSThread detachNewThreadSelector:@selector(run:) toTarget:target withObject:obj];//类方法 或 N

iOS Safari/WebKit对DeviceMotionEvent的实现

请先阅读<iOS Safari/WebKit对DeviceOrientationEvent的实现>,本文是姐妹篇. 简单地描述一下区别,后面会更详细对比: DeviceOrientationEvent是获取方向,得到device静止时的绝对值: DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比. 背景知识: Apple官方依然只发现一个文档: https://developer.apple.com/library/safari/#document

微信读书私密阅读模式开启方法图解

方法一.阅读界面开启 我们只要进入到微信阅读界面,然后我们点击屏幕右上角的[屏幕中间位置],弹出上下栏菜单,在打开界面我们点击[面具]图标即可开启秘密阅读模式. 方法二.书架界面开启 进入[书架]界我们找到要看到书,然后我们用手指长按要私密阅读的书,然后我们点击点击左下角的[私密阅读]即可. 注意:微信读书支持电子书格式 苹果iOS版说明,微信读书暂时只支持EPUB和TXT格式

漫画阅读-布卡漫画的 卷纸的阅读模式 怎么实现的

问题描述 布卡漫画的 卷纸的阅读模式 怎么实现的 最近在做漫画阅读器,想要实现布卡漫画的那种卷纸阅读模式:它的图片是怎么处理的,下载下来.view结尾,比通常的小很多,才200多k:卷纸模式下 阅读 它那个view是怎么实现的,可以连续滑动,针对当前 点手势放大缩小?不胜感激,跪求解啊 解决方案 楼主解决了没有啊?同求啊!!!