本文将演示如何使用UIWebView(网页视图)读取项目中的网页文件,以及执行JavaScript脚本代码。
在项目文件夹【DemoApp】上点击鼠标右键,弹出右键菜单。
【New File】->【Blank】空白模板->【next】
->【Save As】:Register.html->【Create】
在Register.html中输入网页代码:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Registration</title>
6 <script>
7 function submitForm()
8 {
9 //获得用户名的文本框的值
10 var userName = document.getElementById('userName').value
11 //通过弹出警告窗口的方式,显示文本框的内容
12 alert("The value of user name is : "+userName);
13 }
14 </script>
15 </head>
16 <body>
17 <form id="registerForm" action="form_action.php" οnsubmit="submitForm()">
18 UserName: <input type="text" id="userName" name="userName"/><br/>
19 Password: <input type="password" id="password" name="password"/><br/>
20 <input type="submit" value="Submit"/>
21 </form>
22 </body>
23 </html>
在项目导航区,打开视图控制器的代码文件【ViewController.swift】
通过UIWebView(网页视图)加载上文创建的网页文件,并调用脚本函数。
1 import UIKit
2
3 class ViewController: UIViewController {
4
5 //添加一个网页视图对象,作为当前类的属性
6 var webView:UIWebView!
7
8 override func viewDidLoad() {
9 super.viewDidLoad()
10
11 //获得当前设备的屏幕尺寸信息
12 let bounds = UIScreen.main.bounds
13 //通过屏幕尺寸信息创建一个矩形的显示区域
14 let frame = CGRect(x: 0, y: 40, width: bounds.width, height: bounds.height)
15
16 //初始化一个网页视图对象,并以矩形区域作为其显示区域
17 webView = UIWebView(frame: frame)
18 //设置网页视图的背景颜色为橙色
19 webView.backgroundColor = UIColor.orange
20 //将网页视图添加到当前视图控制器的根视图
21 self.view.addSubview(webView)
22
23 //获得网页文件在项目中的路径
24 let path = Bundle.main.path(forResource: "Register", ofType: "html")
25 //并将路径转换成网址的样式
26 let url = URL(string: path!)
27 //通过网页视图的加载请求方法,加载该网址路径下的网页文件
28 webView.loadRequest(NSURLRequest(url: url!) as URLRequest)
29
30 //添加一个按钮控件,当按钮被点击时,将获得并打印网页的属性信息
31 let getInfo = UIButton(frame: CGRect(x: 40, y: 400, width: 240, height: 44))
32 //设置按钮在正常状态下的标题文字
33 getInfo.setTitle("Get the information", for: UIControlState.init(rawValue: 0))
34 //设置按钮的背景颜色为橙色
35 getInfo.backgroundColor = UIColor.orange
36 //给按钮绑定点击事件
37 getInfo.addTarget(self, action: #selector(ViewController.getInfo), for: .touchUpInside)
38
39 //添加第二个按钮事件,当按钮被点击时,将设置网页表单的内容,并提交该表单
40 let submitForm = UIButton(frame: CGRect(x: 40, y: 470, width: 240, height: 44))
41 //设置按钮在正常状态下的标题文字
42 submitForm.setTitle("Set and submit form", for: UIControlState.init(rawValue: 0))
43 //设置按钮的背景颜色为橙色
44 submitForm.backgroundColor = UIColor.orange
45 //给按钮绑定点击事件
46 submitForm.addTarget(self, action: #selector(ViewController.submitForm), for: .touchUpInside)
47
48 //设置根视图的背景颜色
49 self.view.backgroundColor = UIColor.orange
50 //将两个按钮依次添加到当前视图控制器的根视图
51 self.view.addSubview(getInfo)
52 self.view.addSubview(submitForm)
53 }
54
55 //添加一个方法,用来获得并打印网页的属性信息
56 func getInfo()
57 {
58 //通过网页视图的执行脚本命令,执行脚本代码,此脚本代码用来获得网页所对应的网址字符串
59 let url = webView.stringByEvaluatingJavaScript(from: "document.location.href")
60 //执行第二句脚本代码,此脚本代码用来获得网页的标题信息
61 let title = webView.stringByEvaluatingJavaScript(from: "document.title")
62 //将获得的相关信息拼接成一个字符串
63 let info = url! + "\n" + title!
64 //在控制台打印输出
65 print(info)
66 }
67
68 //添加一个方法,用来设置网页表单的内容,并提交该表单
69 func submitForm()
70 {
71 //初始化一个字符串常量,表示一个脚本语句,
72 //该脚本语句用来设置用户名文本框的值。
73 let firstJs = "document.getElementById('userName').value = 'Jerry'"
74 //初始化另一个字符串常量,表示一个脚本语句
75 //该脚本语句用来执行指定名称的函数
76 let secondJs = "submitForm()"
77 //通过网页视图的执行脚本命令,
78 //依次执行这两条脚本语句。
79 webView.stringByEvaluatingJavaScript(from: firstJs)
80 webView.stringByEvaluatingJavaScript(from: secondJs)
81 }
82
83 override func didReceiveMemoryWarning() {
84 super.didReceiveMemoryWarning()
85 // Dispose of any resources that can be recreated.
86 }
87 }