IOS使用WebView内嵌H5页面,使用a标签点击跳转无效问题解决

在使用WKWebView加载H5时,给文字添加超链接,使其可以点击跳转到某个地址。发现在 IOS 的app内,a标签点击跳转没有作用,无法跳转到正确地址,decidePolicyForNavigationAction也无法抓取到点击事件。但安卓是可以正常跳转。

iOS的用户长按链接也是可以打开链接的,不过是打开了个菜单,可以跳转到了浏览器。

WKWebView 加载完链接后点击内部链接无法跳转,是因为<a href = "xxx" target = "_black"> 中的target = "_black" 是打开新的页面,所以无法在当前页面打开,需要在当前页重新加载url。

a 超连接中target:

  • _blank – 在新窗口中打开链接
  • _parent – 在父窗体中打开链接
  • _self – 在当前窗体打开链接,此为默认值
  • _top – 在当前窗体打开链接,并替换当前的整个窗体(框架页)

解决方案01:

将a标签中的target="_blank"删除,或改为target="_self"

解决方案02:

给a标签添加点击事件,如:

<a @click="jumpToUrl" target="_blank"  />

jumpToUrl(){
	window.location.href = this.url
}

解决方案03:

// WKWebView调用window.open(url, "_blank");没有反应的问题
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(nonnull WKWebViewConfiguration *)configuration forNavigationAction:(nonnull WKNavigationAction *)navigationAction windowFeatures:(nonnull WKWindowFeatures *)windowFeatures {
    if (!navigationAction.targetFrame.isMainFrame) {
//        这里是直接跳转
//        [webView loadRequest:navigationAction.request];
		// 以下是去浏览器中打开URL
        NSURL *url = navigationAction.request.URL;
        if (url) {
            // iOS 10及以后版本使用此方法
            UIApplication *application = [UIApplication sharedApplication];
            [application openURL:url options:@{} completionHandler:^(BOOL success) {
                if (success) {
                    // URL成功打开
                    NSLog(@"URL opened successfully");
                } else {
                    // URL打开失败,可能是URL无效或应用没有权限
                    NSLog(@"Failed to open URL");
                }
            }];
        } else {
            // URL字符串无效
            NSLog(@"Invalid URL string");
        }
    }
    return nil;
}

解决方案04:

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    if (@available(iOS 11.0, *)) {
        WKHTTPCookieStore *cookieStore = webView.configuration.websiteDataStore.httpCookieStore;
        //get cookies
        //                [cookieStore getAllCookies:^(NSArray<NSHTTPCookie *> * _Nonnull cookies) {
        NSArray *cookies = [[NSHTTPCookieStorage sharedHTTPCookieStorage] cookies];
        for (id cookie in cookies) {
            [cookieStore setCookie:(NSHTTPCookie *)cookie completionHandler:nil];
        }
        //                }];
    } else {
        // Fallback on earlier versions
    }
    
    //如果是跳转一个新页面
    if (navigationAction.targetFrame == nil) {
//        这里是直接跳转
//        [webView loadRequest:navigationAction.request];
		// 以下是去浏览器中打开URL
        NSURL *url = navigationAction.request.URL;
        if (url) {
            // iOS 10及以后版本使用此方法
            UIApplication *application = [UIApplication sharedApplication];
            [application openURL:url options:@{} completionHandler:^(BOOL success) {
                if (success) {
                    // URL成功打开
                    NSLog(@"URL opened successfully");
                } else {
                    // URL打开失败,可能是URL无效或应用没有权限
                    NSLog(@"Failed to open URL");
                }
            }];
        } else {
            // URL字符串无效
            NSLog(@"Invalid URL string");
        }
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}
### iOS 应用内嵌 H5 页面跳转实现方法 为了实现在 iOS 应用中内嵌 H5 页面并能够顺利进行页面间的跳转,可以采用以下几种方式: #### 使用 `WKWebView` 加载网页 对于现代的 iOS 开发来说,推荐使用 `WKWebView` 来替代旧版的 `UIWebView`。这不仅能提供更好的性能表现,还支持更多的 HTML5 特性和 JavaScript API。 ```swift import WebKit class ViewController: UIViewController, WKNavigationDelegate { var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() webView = WKWebView(frame: self.view.frame) webView.navigationDelegate = self let url = URL(string: "https://example.com")! let request = URLRequest(url: url) webView.load(request) view.addSubview(webView) } } ``` 当涉及到从 H5 页面向原生应用发送消息时,则可以通过注册自定义的消息处理器来处理这些通信请求[^1]。 #### 处理来自 H5 的事件通知 为了让 H5 可以触发特定的行为比如打开新的视图控制器或者其他操作,在 Swift 中设置相应的监听器是非常重要的。下面是一个简单的例子展示了怎样接收到来自 webview 内部发出的信息,并据此执行某些动作。 ```swift // 注册 message handler webView.configuration.userContentController.add(self, name: "share") extension ViewController: WKScriptMessageHandler { public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { guard message.name == "share", let body = message.body as? [String : Any], let tuid = body["tuid"] else { return } // Handle the received data here. print("Received share event with parameter \(tuid)") } } ``` 与此同时,在前端部分也需要相应地调整代码以便于发起这样的跨平台调用。这里给出了一段用于检测设备类型以及传递参数给宿主应用程序的例子[^2]。 ```javascript $(document).on('click','#btn',function(event){ if (navigator.userAgent.match(/iPhone|iPod|iPad/) && navigator.userAgent.indexOf('Safari') != -1 ) { const params = {'tuid': uid}; window.webkit.messageHandlers.share.postMessage(params); } else { console.log('Not an iOS device or not using Safari.'); } }); ``` 通过上述配置,就可以有效地建立起 H5iOS 原生组件之间稳定可靠的桥梁,从而完成所需的任务流程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值