"Reprint" The default interaction behavior of iOS disabled UIWebView

Original address: The default interaction behavior of iOS disabled UIWebView http://my.oschina.net/hmj/blog/111344

Uikit provides UIWebView components that allow developers to embed Web pages in the app. With the UIWebView component, we can embed HTML pages conveniently in the app. When using iOS native components for interface development, the layout of UI elements requires a little bit of computation, especially for complex points of mixed-text content, which sometimes makes a lot of headaches. Compared with the native component, the HTML itself has a strong structural semantics, the use of CSS can be more convenient and efficient content layout and beautification, while JavaScript can add the required interactive action and processing logic for the page. Therefore, it is sometimes better to use html/css/javascript to add low-interactive, purely display-based content to the interface, although this may increase the cost of learning, but now basically every developer has learned and used these foreground technologies more or less. What's more, these learning costs are largely negligible for those who move from traditional front-end development to mobile development.

Common default interaction behavior

Developers who have used the UIWebView component know that when UIWebView loads the display HTML page, the component itself provides some system default interaction behavior, which includes:

1. Long press the text area to display the text magnifier, select the specified area of the page content, including text and pictures, do copy, paste, etc.




2. Long press the linked object to exhale the window frame, perform the page jump or save picture, etc.


For mobile terminals, because of the lack of keyboard mouse under the PC, but only rely on a limited number of recognizable gestures to operate, greatly restricting the flexibility of the interaction. For example, we want to save a picture in the page, using the right mouse button pop-up menu "save Picture" quickly can complete this interaction, on the mobile side of the ipad, the moment will be overwhelmed, so this appears as mentioned in the second interactive behavior to save the picture. So these system behaviors make it easier for users to browse the Web pages, and also to put an eye-catching label on the UIWebView component.

Disabling the default interaction behavior

In actual development work, sometimes we want to make the Web content of UIWebView components closer to native components, both visually and interactively, so the default behavior of these systems becomes an obstacle to achieving this effect. Fortunately, with some special CSS properties provided by the WebKit kernel, we can easily disable these default behaviors. First, we introduce two special CSS properties

-webkit-touch-callout (IOS2.0 and later available)

Whether to allow outbound default popover when long pressing a target object such as a link, the current selection value includes:
None: Do not exhale the window frame
Inherit: Can exhale the window frame

In iOS, when you touch and hold a touch object, such as a link, Safari displays a popup box that contains the link information. This property allows you to disable this popup box.

-webkit-user-select (IOS3.0 and later available)

Whether the user is allowed to select the content of the element, the selection value includes:

Auto: User can select content within an element
None: User cannot select any content
Text: The user can only select texts within an element

With the name of the property and a simple description, maybe we already know exactly what to do next. Suppose we want to load the HTML page for mypage.html, the page contains text, links and pictures, etc., we use this as the premise of a simple code description,

1. Disable the user selection and link popup for the entire page, and add the following style rules to the page style sheet

?

12345

body.disable-default-action{    -webkit-touch-callout:none;    -webkit-user-select:none;}

Also include the type in the body tag, such as

?

123	<bodyclass= "disable-default-action">    page content….</body>

2. Only allow the Form form field to execute the clipboard operation of the text, add the following rules

?

1234	*:not(input,textarea) {    -webkit-touch-callout: none;    -webkit-user-select: none; }

3. To disable the long press popup for a link, add an inline style rule to the link as follows

?

1	<ahref="http://www.baidu.com" style= "-webkit-touch-callout:none">

4. Dynamically add styles to the load page programmatically to achieve the same effect

To implement the Uiwebviewdelegate protocol, add the following code in the Webviewdidfinishload: method

?

1234567

-( void     //Disable user selection     [webview stringbyevaluatingjavascriptfromstring:@ "document.documentelement.style.webkituserselect= ' none ';"          Code class= "CPP Comments" >//disable long press the pop-up box     [webview stringbyevaluatingjavascriptfromstring:@

A little supplement

There is a bool property named Scalespagetofit in the UIWebView class that specifies whether to scale the Web page to use the size of the UIWebView component when the size of the Web page and the UIWebView are inconsistent. The default value is no, which ignores the size relationship of the Web page to the WebView component, which is displayed at the original size of the page and does not perform any scaling. Sometimes in order to ensure that the content scroll bar, to ensure that the size of the HTML page and the size of the WebView component consistency, and set webview.scrollView.scrollEnabled = NO.

Through the above points, for loading the display of simple HTML page, basically we can achieve the "genuine" effect.

StackOverflow Related discussions: Disabling user selection in UIWebView

Apple Webkit Handbook: CSS
Css:not () reference

Note: described in IOS6.1

"Reprint" The default interaction behavior of iOS disabled UIWebView