在 UIWebView 中加载包含 SVG 的 HTML5，同时保持 localStorage 可用答案

【问题标题】：Loading HTML5 containing SVG in UIWebView whilst keeping localStorage available在 UIWebView 中加载包含 SVG 的 HTML5，同时保持 localStorage 可用
【发布时间】：2023-03-31 05:55:01
【问题描述】：

我正在开发一个使用 UIWebView 来显示基于 HTML5 的页面的 iphone 应用程序。要求包括：

1：页面需要渲染内嵌 SVG。
2：页面需要访问localStorage。

为了获得正确的 mime 类型以便内联 SVG 可以工作，我首先尝试使用下面的代码来填充 web 视图：

NSString *resourcePath = [[NSBundle mainBundle] resourcePath]; 
NSURL *baseURL = [[NSURL alloc] initFileURLWithPath:resourcePath];
[self.webView loadData:htmlData 
 MIMEType:@"application/xhtml+xml"  
 textEncodingName:@"UTF-8" 
 baseURL:baseURL];

但是，在尝试这种技术时，我在尝试访问本地存储时不断引发 SECURITY_ERR 异常： W3C documentation on localStorage and SECURITY_ERR

我发现有人遇到同样的问题，他们认为这是由于域起源： Post covering issues with UIWebView and localStorage access issues

他们改用 NSURLRequest 解决了他们的问题：

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:[path stringByAppendingString:@"path and file name of the file"]];
NSURLRequest *request = [NSURLRequest requestWithURL:baseURL];
[webView loadRequest:request];

这似乎解决了我的 localStorage 问题，但这会破坏我的 SVG，因为我不知道在这种情况下如何显式设置 mime 类型。

所以，问题是，我如何为内联 svg 加载具有正确 mime 类型的数据，同时仍然保持文档的来源符合 localStorage 要求？

感谢您的帮助:)

【问题讨论】：

标签： iphone objective-c svg local-storage

【解决方案1】：

您是否尝试过创建 NSMutableURLRequest 并将 mime 类型添加为 HTTP 标头字段？

NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:baseURL];
[request addValue:@"application/xhtml+xml" forHTTPHeaderField:@"Content-Type"];

维基百科上的list of header fields 说这仅用于放置和发布请求，但可能值得一试。

【讨论】：

+1 因为这是一种我没有尝试或想过的新颖方法，尽管它不起作用:(

【解决方案2】：

我正在使用它直接加载我的 .svg 文件：

    CGRect webFrame;
    webFrame = CGRectMake(0.0, 0.0, 480, 320);
    UIWebView *webView;
    webView = [[UIWebView alloc] initWithFrame:webFrame];
    [[self view] addSubview:webView]; 
    webView.delegate = self;
    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout = 'none'"];
    NSString* urlAddress = [[NSBundle mainBundle] pathForResource:@"mappaSVG" ofType:@"svg"];
    NSURL* url = [NSURL fileURLWithPath: urlAddress];
    NSURLRequest* requestObj = [NSURLRequest requestWithURL: url];
    [[self webView] loadRequest: requestObj];
    webView.scalesPageToFit = YES;
    [super viewDidLoad];

这一切都很好，但有时我用它来加载一个调用/加载外部 .svg 文件的 .html 文件：

NSString* urlAddress = [[NSBundle mainBundle] pathForResource:@"fileWithAMap" ofType:@"html";

fileWithAMap.html 的内容在哪里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta name='viewport' content='initial-scale=1.4; maximum-scale=9.0; minimum-scale=0.07; user-scalable=1;' />
    <title>My Title</title>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="content">
    <embed src="mappaSVG.svg" width="3840" height="3200" type="image/svg+xml" />
</div>
</body>
</html>

它也很好用

【讨论】：

当您直接加载 SVG 文件或使用 object 或 embed 标签将 SVG 嵌入到 html 中时，这些方法会起作用。但是，我需要加载一个内联 SVG 的 html 页面（嵌入和对象标签存在限制：alistapart.com/articles/…），并且我需要这样做，同时保持 localStorage 的文档源策略。跨度>

【解决方案3】：

今天我感到精神焕发，这在很大程度上要感谢 @JimDusseau 提供了一种新颖的尝试来解决这个问题（我必须承认我已经放弃了让它发挥作用。）不幸的是，Jim 的方法适用于该请求，但它仍然对响应没有影响。

然后我在 Google 上搜索了 2 个小时，试图找到其他选项，其中一个是尝试将 mime 类型与特定文件扩展名等相关联。

所有这些谷歌搜索都被证明是徒劳的，但它确实引发了对另一个文件扩展名的模糊记忆......

.xhtml

使用此文件扩展名是否会导致使用适当的 mime 类型处理请求？我的心开始怦怦直跳，我能感觉到血液在我的血管中流淌，并且怀着极大的期待，我进行了编辑并重建了项目，以发现 [drumroll]...

是的！是的！是的！ iphone 使用适当的 mime 类型处理响应并保持文档来源对 localStorage 满意。

这是工作代码：

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"xhtml"];
NSURL *baseURL = [NSURL fileURLWithPath:filePath];
NSURLRequest *request = [NSURLRequest requestWithURL:baseURL];
[webView loadRequest:request];

简单但难以捉摸（直到现在。）

【讨论】：