前言
下午运营的同事在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
网友评论