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需要注意

  • 其中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后,引入资源方式

  • 相对路径 
    <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设置为bundleURL

如果资源访问的是沙盒中的资源,如:

模拟器目录

<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'>

真机路径

<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'>

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

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

本人是通过以下方式解决的

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调试界面,此处就不调试截图.

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/HJiang/p/7942846.html