This is a piece of information prepared in 2013, now shared, for the needs of students to reference.
Points
(1) test of Reading mode
After the frame is loaded, a timer is triggered to detect whether reading mode can be used. The way of detection is to use the interface of the JavaScriptCore framework to execute a JS script, and then take the attribute value in JS to determine whether you can enter reading mode. If the current page can enter reading mode, the Reading Mode toggle button is displayed in the Address bar.
(2) Execution of Reading mode
When the user clicks the Read mode toggle button, it executes in turn:
I. Execute the Reading Mode check script to determine whether you can enter reading mode.
II. Create WebView and load the HTML page of the Reading Mode page, under IPad for reader~ipad.html.
III. In the page allows you to modify the position of the Window object, execute the Reading mode processing script.
V. Display page
(3) control of the Reading Mode page
Safari implements several classes to handle the display and manipulation of reading patterns.
The main classes involved
TabDocumentRepresents a page document that is checked for pages, where the main control operation of the page and the control operation of the Reading mode ( ReaderControllerDelegate ).
BrowserReaderViewis the class that is responsible for reading Mode page display.
Sequence diagrams for reading mode detection
Here is a sequence diagram that fires after the normal page loads TabDocument _readerAvailabilityDetectionTimer :
In addition, the other two functions -[BrowserController stopFromAddressView:] and -[TabDocument _progressDidStall] also trigger the execution of reading mode detection.
When the timer triggers, it starts to actually execute the script:
JSEvaluateScript, and JSObject so on are the interfaces provided by the JavaScriptCore framework.
Executes the completion script, executes the callback function to -[TabDocument _didDetectReaderAvailability:] pass the value in the script ReaderArticleFinder.isReaderModeAvailable , and then determines whether to display the Reading Mode button according to this value.
Display of reading modes
When you click the Reading Mode button, the 2.1 is to re-initiate the execution of the detection script, and step 2.2 to start loading the display reading mode.
WebView releases an interface webView:didClearWindowObject:forFrame that allows the user to modify the global object, which is where Safari executes the read mode processing script in advance of the page's actual load, and then executes and displays the page content according to the following notation when the page is loaded ReaderJS.loaded() .
<body class="preloading"onload="ReaderJS.loaded();" onscroll="articleHasScrolled();">
ReaderJSIs the object in the Reading Mode content extraction script.
The following is the script execution process for performing reading mode content extraction:
* This is Apple webView:didClearWindowObject:forFrame 's description:
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 be cleared from the Window object so the new page has a fresh Window object to use. If The page is loading depends on specific Windows object properties to exist, they should is added at this point befo Re any scripts is executed.
Attached are three uses to the file, respectively:
Reader~ipad.htmlThe Reading Mode page HTML file used under ipad
safari_reader_check.jsreading mode detection JS script
safari_reader_clicked.jsReading Mode content Extraction JS Script
View on GitHub, Link: iossafarireadermode.
Reference
. Process Records for analysis
Research on IOS Safari reading mode