简体   繁体   English

Cocoa WebView - 加载本地HTML页面

[英]Cocoa WebView - Loading a local HTML page

After browsing quite a bit, I still can't figure this out. 浏览了一下之后,我仍然无法弄清楚这一点。 I've added a HTML page and its images directory into my project Resources group in Xcode (Copied them over). 我已将HTML页面及其images目录添加到Xcode中的项目资源组中(复制它们)。

When I try to load the WebView with the following code, the text is displayed fine, but the images aren't loaded. 当我尝试使用以下代码加载WebView时,文本显示正常,但未加载图像。

NSString *path = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"index.html"];
NSString *htmlContent = [NSString stringWithContentsOfFile:path];
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[[tempWebView mainFrame] loadHTMLString:htmlContent baseURL:url];

EDIT: Sorry about the delay, here's some basic html that failed. 编辑:抱歉延迟,这里有一些失败的基本HTML。

<html>
    <body> 
        <img src="images/bg.png"></img> 
    </body>
</html>

And my edited code looks like this - 我编辑的代码看起来像这样 -

NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:path];
[[webView1 mainFrame] loadRequest:[NSURLRequest requestWithURL:url]];

EDIT2: Just realized it was an issue with the path. 编辑2:刚刚意识到这是路径的问题。 Apparently <img src = "images/bg.png"> doesn't work, but if I copy bg.png to the root directory and say <img src = "bg.png"> everything works fine. 显然<img src = "images/bg.png">不起作用,但如果我将bg.png复制到根目录并说<img src = "bg.png">一切正常。 I'm still not sure where I'm going wrong with this. 我仍然不确定我在哪里出错了。

Consider doing the following: 考虑执行以下操作:

  1. Instead of getting the resource path and stapling a subpath onto it yourself, ask the bundle to give you the correct path . 不要自己获取资源路径并将子路径装订到其上,而是要求捆绑包为您提供正确的路径
  2. Instead of handling a path at all, ask the bundle to give you the correct URL . 而不是处理路径, 请求捆绑包为您提供正确的URL (Requires Mac OS X 10.6 or later.) (需要Mac OS X 10.6或更高版本。)
  3. Instead of injecting HTML contents directly into the frame, ask the WebView to load the URL . 不要将HTML内容直接注入到框架中,而是要求WebView加载URL

This reduces your code to two lines that, if the HTML code is correct, will work. 这会将您的代码减少到两行,如果HTML代码正确,则可以使用。

I think that the problem here is to do with how files are copied to the resources directory during the build phase. 我认为这里的问题是在构建阶段如何将文件复制到资源目录。 Any folders that are shown as groups in Xcode will be flattened when they are copied across. 在Xcode中显示为组的任何文件夹在复制时都将被展平。 If you are adding an entire website folder structure to your project you must select "Create folder references for any added folders" when adding the structure. 如果要将整个网站文件夹结构添加到项目中,则必须在添加结构时选择“为任何添加的文件夹创建文件夹引用”。

An example: I have an html file that references an image in a folder of the same name. 例如:我有一个html文件,它引用同名文件夹中的图像。 I add all this into my project selecting 'folder references': 我将所有这些添加到我选择'文件夹引用'的项目中:

添加文件

The files will look like this in my project (note the blue folder): 我的项目中的文件将如下所示(请注意蓝色文件夹):

项目树

When the project is built the web contents folder will be maintained: 构建项目时,将维护Web内容文件夹:

捆绑包中的Resources文件夹

There is no need to start setting base URLs or loading with strings. 无需开始设置基本URL或使用字符串加载。 The web page can now be successfully loaded like this: 现在可以成功加载网页,如下所示:

NSURL *url = [[NSBundle mainBundle] URLForResource:@"LocalTestWeb" withExtension:@"html"];
[[self.webView mainFrame] loadRequest:[NSURLRequest requestWithURL:url]];

This code works for me (only having issues with Canvas): 这段代码适合我(只有Canvas的问题):

NSString* filePath = [[NSBundle mainBundle] pathForResource:@"index" 
                                                     ofType:@"html"
                                                inDirectory:@"html_files_folder"];
NSURL* fileURL = [NSURL fileURLWithPath:filePath];
NSURLRequest* request = [NSURLRequest requestWithURL:fileURL];
[[webView mainFrame] loadRequest:request];

You will need to get the image file data in base64 string. 您需要获取base64字符串中的图像文件数据。 And put that string in img tag as below. 并将该字符串放在img标签中,如下所示。

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />

See this for more details: http://danielmclaren.com/node/90 有关详细信息,请参阅此处: http//danielmclaren.com/node/90

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM