IOS Safari reading mode

IOS Safari reading mode

This is an article prepared in 2013. I will share it with you for your reference.

Key Points

(1) reading mode detection
After the frame is loaded, a timer is triggered to check whether the reading mode can be used. The method of detection is to use the JavaScriptCore framework interface to execute a JS script, and then take the attribute value in JS to determine whether it can enter the reading mode. If you can enter the reading mode on the current page, the Read mode switch button is displayed in the address bar.

(2) reading mode execution
When you click the Read mode switch button, the following commands are executed in sequence:

I. Run the Read mode check script to check whether the current reading mode is available.
Ii. Create a WebView and load the HTML page of the reading mode page, which is Reader ~ on the iPad ~ IPad.html.
Iii. On the page, you can modify the location of the Window object and execute the reading mode processing script.
V. Display page

(3) control the reading mode page
Safari implements several classes to process the display and operation of the reading mode.

Main classes involved

TabDocumentIt represents a page document signed by the page. Here, the main page control operations and reading mode control operations (ReaderControllerDelegate).
BrowserReaderViewIs the class for display on the reading mode page.

Read mode detection sequence diagram

The following is a trigger after loading a normal page.TabDocumentOf_readerAvailabilityDetectionTimerSequence diagram:
VcWxvjo8YnIgLz4NCjxpbWcgYWx0PQ = "sequence #2" src = "http://www.bkjia.com/uploads/allimg/160324/0416021944-2.png" title = "\"/>

JSEvaluateScript,JSObjectAnd so on are all interfaces provided by JavaScriptCore framework.

After the script is executed, the callback function is executed.-[TabDocument _didDetectReaderAvailability:]In the scriptReaderArticleFinder.isReaderModeAvailableAnd then determine whether to display the reading mode button Based on the value.

Display of reading mode

When you click the Read mode button, 2.1 re-executes the check script, and Step 2.2 begins to load the display read mode.

WebView releases an InterfacewebView:didClearWindowObject:forFrameAllows users to modify global objects. Safari executes the Read mode processing script before the page is loaded. Then, when the page is loaded, it executesReaderJS.loaded()To display the page content.

 

ReaderJSThe reading mode extracts the objects in the script.

The following is the script execution process for reading mode content extraction:
HtmlHtml file of the reading mode page used in iPad
safari_reader_check.jsRead mode detection JS script
safari_reader_clicked.jsReading mode content extraction JS script