WKWebView加载HTML代码及本地css文件

作者: 一脸盐汽水 | 来源:发表于2018-12-26 16:14 被阅读14次

接入一个第四方支付时，支付那边必须用form表单提交数据，导致需要我们App端加载HTML代码显示出网页支付操作，遇到了坑，所以记录一下：
1.获取到后台返回的form表单，并拼接HTML代码

- (NSString *)getHtmlStringWithData:(id)data
{
    NSMutableString *html = [NSMutableString string];
    [html appendString:@"<html>"];
    [html appendString:@"<head>"];
    //加载css文件
    [html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"mipay" withExtension:@"css"]];
    //禁止wkwebview缩放
    [html appendString:@"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1,user-scalable=no\">"];
    [html appendString:@"</head>"];
    [html appendString:@"<body>"];
    NSString *form = [data objectForKey:@"html"];
    [html appendString:form];
    [html appendString:@"</body>"];
    [html appendString:@"</html>"];
    return html;
}

2.WKWebView加载HTML代码

//获取css资源文件，file:///Resources/是路径
NSURL *baseUrl = [NSURL URLWithString:@"file:///Resources/"];
[_wkwebView loadHTMLString:self.htmlStr baseURL:baseUrl];

css文件所在路径如图

WX20181226-160446@2x.png

本来到此结束，不过遇到两个问题

3.WKWebView显示的网页内容被缩放，禁止缩放的方法已经放到获取HTML代码里，查看步骤1

4.加载type为submit的input标签时，发现手机端与网页加载出来的按钮不一样，而且背景色差距很大，网上找到了原因和解决方案， webview显示该按钮时，会用苹果默认UI渲染，这样就出现我刚才那种现像，解决方法是在css文件中加入-webkit-appearance: none;

image.png

到此为止

网友评论

本文标题：WKWebView加载HTML代码及本地css文件

本文链接：https://www.haomeiwen.com/subject/hwihlqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

WKWebView加载HTML代码及本地css文件

本来到此结束，不过遇到两个问题

到此为止

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读