[IOS] Handling popup/new window inside webview

Các bạn đã bao giờ click vào một liên kết nào đó trong webview nhưng không thấy điều gì xảy ra hoặc là khi các bạn click vào button đăng nhập sử dụng tài khoản mạng xã hội như facebook hay twitter thì chỉ thấy một white-page hiện ra? Các bạn có tự hỏi tại sao lại xảy ra hiện tượng như vậy không? Bởi vì từ bây giờ webview không hỗ trợ new windows giống như các trình duyệt chúng ta hay sử dụng nữa điều đó dẫn đến việc chúng ta phải tự xử lý vấn đề đó.

Tại bài viết này mình sẽ làm một demo nhỏ mô phỏng cả 2 trường hợp là show lên popup và mở ra một new window khi các bạn click vào đường link trong webview, các bạn có thể xem ví dụ sau:

Mặc định các bạn sẽ thấy khi chúng ta lick vào các đường link có trong web view thì sẽ không xảy ra hiện tượng gì cả.

Giải pháp 1: Sử dụng javascript injection

Trong giải pháp này mỗi lần webview mở ra một trang web, chúng ta sẽ inject vào một đoạn mã javascript vào trang đó để override function window.open() vì vậy thay vì mở một cửa sổ mới thì webview sẽ load url mới trong cùng một cửa sổ.

webView.evaluateJavaScript("window.open = function(open) { return function (url, name, features) { window.location.href = url; return window; }; } (window.open);", completionHandler: nil)

Chúng ta cũng sẽ phải handle trường hợp popup được đóng lại thì viewcontroller của chúng ta cũng sẽ phải ẩn đi

webView.evaluateJavaScript("window.close = function() { window.location.href = 'myapp://closewebview'; }", completionHandler: nil)

Tất cả đoạn code trên sẽ như sau:

Đối với <a href=”http://a_hyper_link" target=”_blank”>Display name</a> chúng ta sẽ dùng WKUIDelegate để load request của cửa sổ mới khi click vào link trên ngay bên trong cửa sổ hiện tại của webview, ta sẽ làm như sau:

Nhược điểm của giải pháp này là bạn sẽ phải dùng đến javascript để handle trường hợp tạo ra một pop-up window hay một cửa sổ mới bên trong webview. Vậy nên chúng ta sẽ đến với giải pháp thứ 2.

Giải pháp thứ 2: Add sub view

Với giải pháp này, khi bạn tạo một WKWebView thì bạn sẽ phải cấu hình WKPreferences và set thuộc tính javaScriptCanOpenWindowsAutomatically là true, điều này sẽ cho phép webview open popup

Sau đó mỗi lần webview muốn tạo ra một cửa sổ mới hay là một popup mới thì chúng ta sẽ tạo ra một popup webview cho cửa sổ/popup mới đó và add nó vào parent view hiện tại

và trường hợp khi user đóng cửa sổ/popup hiện tại đi thì chúng ta chỉ việc xoá nó đi là xong

Đây là thành quả chúng ta đạt được.

Bài viết của mình đến đây là kết thúc, hẹn gặp các bạn trong bài viết tiếp theo. Thank you for reading!