WKWebView使用过程的遇到的一些问题记录/webView结合Safari调试

时间 2019-11-09

标签 wkwebview 使用过程遇到一些问题记录 webview 结合 safari 调试繁體版

原文原文链接

WKWebView加载问题

- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;

- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));

- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;

- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL API_AVAILABLE(macosx(10.11), ios(9.0));

baseURL须要注意javascript

其中2个方式是ios9之后提供的
方法参数baseURL,此参数是html加载的资源是基于的基础路径,也能够理解为资源加载引入的相对路径,通常为[[NSBundle mainBundle] bundleURL], 若是设置的是bundleURL那么html中使用的资源引用相对路径,相对路径相对于bundle路径好比:<img src="base.png">,base.png就会在bundle资源中查找;

若是baseURL设置的为bundleURL,也能够写绝对路径,绝对路径为bundle资源的绝对路径. 好比html中引入了一些Js. css,png文件,如:

<script type="text/javascript" src="/Users/HJiang/Library/Developer/CoreSimulator/Devices/BFE72029-56CE-4768-8312-05CA50250212/data/Containers/Bundle/Application/02F79F9E-AE1C-4BCA-9F2F-F9B253113E2C/xxxx.app/jquery.js">

baseURL设置为bundleURL后,引入资源方式css

相对路径
```
<img src="tab.png">
```

绝对路径

<img src="/Users/HJiang/Library/Developer/CoreSimulator/Devices/BFE72029-56CE-4768-8312-05CA50250212/data/Containers/Bundle/Application/02F79F9E-AE1C-4BCA-9F2F-F9B253113E2C/xxxx.app/tab.png">

WebKit访问沙盒资源问题

baseURL设置为bundleURLhtml

若是资源访问的是沙盒中的资源,如:前端

模拟器目录java

<body isAutoLoadImage ='1' background = '/Users/HJiang/Library/Developer/CoreSimulator/Devices/BFE72029-56CE-4768-8312-05CA50250212/data/Containers/Data/Application/6CD99493-3C89-40F0-A7C4-353DBA7893F3/Documents/waterfile/6005001463_2025.jpg'>

真机路径jquery

<body isAutoLoadImage ='1' background = '/var/xxxx/Library//Devices/BFE72029-56CE-4768-8312-05CA50250212/data/Containers/Data/Application/6CD99493-3C89-40F0-A7C4-353DBA7893F3/Documents/waterfile/6005001463_2025.jpg'>

使用的是沙盒中绝对路径,经测试此方式在模拟器上资源能够正常访问,真机没法访问资源ios

因webkit框架访问沙盒资源存在bug,没法加载经过绝对路径访问到资源.web

本人是经过如下方式解决的macos

webkit能够经过路径为服务器方式就能够加载服务器

GitHub上有个神器：GCDWebServer，此次就用的这个
经过pod集成

pod "GCDWebServer", "~> 3.0"

，直接上代码

// 官方给的示例是在AppDelegate里启动本地服务器，可是我这个并无必要在APP启动时就启动本地服务器，因此我放在了核心功能控制器的viewDidLoad方法内
// 1.导入头文件
#import <GCDWebServer/GCDWebDAVServer.h>
// 2.定义全局属性
@property (nonatomic,strong) GCDWebServer *webSever;

// 3. 主要代码
_webSever = [[GCDWebServer alloc] init];
[_webSever addGETHandlerForBasePath:@"/" directoryPath:NSHomeDirectory() indexFilename:nil cacheAge:3600 allowRangeRequests:YES];
[_webSever startWithPort:8007 bonjourName:nil];
// 说明:上面代码就会在沙盒的根目录中创建服务,端口为8007;经过startWithPort就已经建立了服务

// 好了，这就结束了！WTF，这就完了，是的，能够这么说
// 比方说文件存在Library下有一个123的文件
NSString *basePath = @"http://localhost:8007/Library/water"; // 这样就能够访问到这个文件了，我只须要把个人文件名拼上localhost路径而后传给前端，他们拿到这个连接直接访问就能够拿到这个文件了

.这样就能够访问沙盒中的任何资源,填写好路径就OK
好比访问Library目录下water文件夹下的123.jpg,那么路径能够为<img src="http://localhost:8007/Library/water/123.jpg"
.若是想把服务的根路径修改成沙盒的Documents目录能够修改directoryPath:参数路径 [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject]

这样就模拟器和真机均可以访问沙盒中的资源.

在不用的时候须要中止服务

[[ZTELocalResourceServer sharedLocalResourceServer] stop];

抽取了一个管理类

/**
 本地资源服务
 */
@interface LocalResourceServer : ZTEManagerBase

+ (instancetype)sharedLocalResourceServer;

- (void)start;
- (void)stop;

@end

#import "LocalResourceServer.h"

#import <GCDWebServer/GCDWebServer.h>

#import "LocalResourceDefine.h"

@interface LocalResourceServer ()

@property (nonatomic,strong) GCDWebServer *webSever;

@end

@implementation LocalResourceServer

+ (instancetype)sharedLocalResourceServer{
    static LocalResourceServer *localResourceServer = nil;
    
    static dispatch_once_t predicatemail;
    dispatch_once(&predicatemail, ^{
        
        localResourceServer = [[LocalResourceServer alloc] init];

    });
    
    return localResourceServer;
}

- (void)start{
    // 3. 启动服务
    
    self.webSever = [[GCDWebServer alloc]init]; // NSHomeDirectory() or  [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject]
    [self.webSever addGETHandlerForBasePath:@"/" directoryPath:kDocumentsPath indexFilename:nil cacheAge:3600 allowRangeRequests:YES];
    [self.webSever startWithPort:kLocalServerPort bonjourName:nil];
}

- (void)stop{
    // 中止服务
    [self.webSever stop];
　　self.webSever = nil;
}

WKWebView建立方法

+ (instancetype)sharedWebView:(CGRect)frame configuration:(WKWebViewConfiguration *)config{
    ZTEWebView *webView = nil;
    if(config == nil){
        // 禁止选择CSS
        NSString *css = @"body{-webkit-user-select:none;}";
        
        // CSS选中样式取消 此方式可能会影响dataDetectorTypes属性
        NSMutableString *javascript = [NSMutableString string];
        [javascript appendString:@"var style = document.createElement('style');"];
        [javascript appendString:@"style.type = 'text/css';"];
        [javascript appendFormat:@"var cssContent = document.createTextNode('%@');", css];
        [javascript appendString:@"style.appendChild(cssContent);"];
        [javascript appendString:@"document.body.appendChild(style);"];
        
        // javascript注入
        WKUserScript *noneSelectScript = [[WKUserScript alloc] initWithSource:javascript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
        WKUserContentController *userContentController = [[WKUserContentController alloc] init];
//        [userContentController addUserScript:noneSelectScript];
        
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController = userContentController;
//        if(greaterIOS10){
//            configuration.dataDetectorTypes = WKDataDetectorTypePhoneNumber | WKDataDetectorTypeLink | WKDataDetectorTypeCalendarEvent;
//        }
        
        WKPreferences *preferences = [[WKPreferences alloc] init];
        preferences.javaScriptCanOpenWindowsAutomatically = YES; // 不经过用户交互，是否能够打开窗口
        preferences.javaScriptEnabled = YES; //是否支持JavaScript
        preferences.minimumFontSize = 15.0; // 最小字体大小
        configuration.preferences = preferences; // 偏好设置
        webView = [[self alloc] initWithFrame:frame configuration:configuration];
    }else{
        webView = [[self alloc] initWithFrame:frame configuration:config];
    }
    
    return webView;
}

WebView调试

打开通用设置->Safari->高级->Web 检查器 (模拟器和真机都同样)

而后打开Mac Safari 偏好设置->高级

运行app,打开webView,而后打开safari开发菜单,选择模拟器仍是iPhone,选择对应的app就能够跳出Html调试界面,此处就不调试截图.