[Swift通天遁地]一、超級工具-(5)使用UIWebView(網頁檢視)載入本地頁面並呼叫JavaScript(指令碼)程式碼
阿新 • • 發佈：2018-12-18
本文將演示如何使用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 //通過彈出警告視窗的方式，顯示文字框的內容 12alert("The value of user name is : "+userName); 13 } 14 </script> 15 </head> 16 <body> 17 <form id="registerForm" action="form_action.php" onsubmit="submitForm()"> 18 UserName: <input type="text" id="userName" name="userName"/><br/> 19Password: <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 }