WKWebView适配网页链接包含_blank属性导致不能跳转的

前言

下午运营的同事在APP的跑马灯上配了一个淘宝的链接,效果如下图:

SimulatorScreen2018-06-27at20.21.17

但点击页面上的商品,页面没反应,打印出来跳转的链接是这样:
https://uland.taobao.com/coupon/edetail?spm=a3126.7792474/a.1005.1&e=cXimz4TLjIQGQASttHIRqWKQY7MjCdZaX1Ntma1L86+EdvD4wwM+Y73pFa9Azc+ZXBymrrjpoBQ6fLdAZDu8i42sTXYoCSgGDfqEFBOhTczH84UUJ6ek81fdFfqCDAtNSy49IabX1vktw6/aQUEtrNCtedbC7d6D&mt=1&ptl=bucket:_TL-43223;prepvid:a3126.7792474/a_1530101783882_3161184732177076;engpvid:100_10.103.67.73_12253_9391530101784658599;from:temaisearch
检查了一下链接也没发现有什么问题,为什么就不能跳转页面呢?然后将这个链接写死为 webview页面的 url,这时页面可以正常跳转了.为什么相同的一个链接会因为操作的方式不用,而表现为两种结果?

问题出现的原因

在电脑浏览器上查看了那个淘宝页面的html 元素后,发现

屏幕快照2018-06-2720.32.11

超链接a标签的target属性为_blank

理解 HTML < a>标签的target属性
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

根据上面的说明当target属性值为_blank，是让浏览器新开一个页面来打开链接，而不是在原网页上打开。

在UIWebView上，只有一个页面，所以会自动在原来的页面上打开新链接。

但是在WKWebView上就不是这样了。

用户点击网页上的链接，需要打开新页面时，会先调用WKWebView 的 WKNavigationDelegate代理方法：

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 

这个方法的参数 WKNavigationAction 中有两个属性：sourceFrame和targetFrame，分别代表这个action的出处和目标。类型是 WKFrameInfo 。WKFrameInfo有一个 mainFrame 的属性，正是这个属性标记着这个frame是在主frame里还是新开一个frame。

如果 targetFrame 的 mainFrame 属性为NO，表明这个 WKNavigationAction 将会新开一个页面。

WKWebView遇到这种情况，将会调用 它的 WKUIDelegate 代理方法：

- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

如果实现这个方法，会返回一个新的WKWebView，让 WKNavigationAction 在新的webView中打开。如果你没有设置 WKUIDelegate代理和没有实现这个代理方法。那么WKWebView将什么事情都不会做，也就是你点那个按钮没反应。

解决办法

解决办法1：

直接在原有的decidePolicyForNavigationAction代理方法中加上以下代码：

if (navigationAction.targetFrame == nil) {

    [webView loadRequest:navigationAction.request];

}

//如果方法中已有这行代码,则不需要再加了,否则运行会报错
decisionHandler(WKNavigationActionPolicyAllow);

解决办法2：

在代码中实现以下代理方法：

-(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{

    //假如是重新打开窗口的话
    if (!navigationAction.targetFrame.isMainFrame) {

        [webView loadRequest:navigationAction.request];

    }

    return nil;
}

解决办法3：

将网页上所有a标签的target属性值都去掉

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

  if (!navigationAction.targetFrame.isMainFrame) {

      [webView evaluateJavaScript:@"var a = document.getElementsByTagName('a');for(var i=0;i<a.length;i++){a[i].setAttribute('target','_self');}" completionHandler:nil];

  }

  decisionHandler(WKNavigationActionPolicyAllow);
}

不过用这种方式点击两次才能跳转，因为第一次点击时，会先用JavaScript脚本把< a >标签target属性原来的_blank替换为_self,但这时的navigationAction.targetFrame为nil，因此不会跳转页面。

ScreenShot2018-06-27at6.43.09PM

第二次点击时，navigationAction.targetFrame.isMainFrame的值才为NO，所以这时才能跳转页面。

ScreenShot2018-06-27at6.46.17PM