ios加载本地html-如何将本地html、图片、js、css文件引入到iOS的webView中

2023-08-29 0 4,569 百度已收录

项目要求

最近开发的项目需要一个webView,这个webView会需要导入项目中的一些资源image、js、css

在webView中引入本地html文件

这里最重要的webView方法是:loadHTMLString:baseURL:将HTML文件的内容以字符串的形式加载到webView中,然后进行解析

加载webview的代码如下

   // get the model which is a html file for the webView
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
// load the html file to webView
[_webView loadHTMLString:htmlCont baseURL:nil];

ios加载本地html-如何将本地html、图片、js、css文件引入到iOS的webView中

通过上面的方法,很方便的将一个HTML文件加载到webView中,很简单,拿出来,我们点击高级功能吧!

在webView中引入本地图片文件

这个功能的实现就是要对里面的方法进行进一步的扩展,而最重要的就是哪个baseURL。 首先看实现代码:

// get the model which is a html file for the webView
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];  
  // 获取当前应用的根目录
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];    
// 通过baseURL的方式加载的HTML
// 可以在HTML内通过相对目录的方式加载js,css,img等文件
[_webView loadHTMLString:htmlCont baseURL:baseURL];

需要注意的是,应用程序中的所有资源文件都在baseURL的根目录下,也就是这段代码中bundlePath的根目录下,所以图片资源无论放在项目中的目录结构如何,都会在HTML 有时,它们都是直接扎根的。

加载css和图片时baseURL不能为nil

ios加载本地html-如何将本地html、图片、js、css文件引入到iOS的webView中

我就在这里简单说一下

到底什么是baseURL? 我对此也很好奇,所以我 NSLog 代码上面的baseURL,结果是: file:///Users/(username)/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications /(serial一些小写字母加上连字符和数字的数量)/(应用程序名称).app/。 之后我在终端找到这个目录,打开,发现里面是一些HTML、图片、txt等静态资源。

至此ios加载本地html,webView中插入本地图片资源的功能已经实现了,下面是一个比较有挑战性的功能:添加js文件

将本地js文件添加到webView中

添加js文件

这个实现看起来很简单,因为不需要任何代码层面的改动,只需在前面的方法中添加图片即可,直接将js文件名写在脚本的src上即可。

ios加载本地html-如何将本地html、图片、js、css文件引入到iOS的webView中

而如果直接这么写,你会发现js资源根本没有加载。 图片和js有什么区别? 看里面的图片可以看到我引入到项目中的jquery.js和scrollLoading.js默认是不包含在bundlePath中的。 那么,这是js资源没有正确加载的原因吗?

在这篇文章:Howtoloadalocal.CSSfile&JavaScriptresourcesusingiPhoneUIWebViewClass和这篇文章基于iPhone lightbox的图片放大效果和网页布局中ios加载本地html

Select .js file and in the “Detail” view unselect the bullseye column indicating it is compiled code
In the “Groups & files” view expand the “Targets” tree and expand the application then go to “Copy Bundle Resources” and drag the *.js files into it.

方法是有的,但是这些英文说明没有附图,实在看不懂。 一般的理解就是js文件是在xcode上的,而且是默认需要编译的文件,这就导致不可能了。 它会被放置在我们刚刚放置的BundlePath中(更专业的名字应该是BundleResources)。

所以要解决的问题是如何防止js文件被编译并放入BundleResources中。

期间为了理解前面两句英文,我就不讲Google的经验了,只讲结果。

ios加载本地html-如何将本地html、图片、js、css文件引入到iOS的webView中

在xcode上,每个项目至少有一个Targets(有多个,但是我看不懂),在Targets上(打开Targets的表格在右栏,点击project,在中间的内容区,会出现是一个项目drink Targets),里面存放了一些资源文件,可以在BuildPhases下看到。 有两项与此内容最相关:CompileSources 和 CopyBundleResources。 在不做改动的情况下,展开CompileSources就可以看到找了很久的jquery.js和scrollLoading.js

e2804a7f745cc38bf3b4e5e1eae08845.png

fcba8fcb77ff990394dfcd106a530e3b.png

CompileSources之后可以看到两个js文件

ios加载本地html-如何将本地html、图片、js、css文件引入到iOS的webView中

接下来要做的事情很简单,从CompileSources中删除这两个js文件,将这两个文件添加到CopyBundleResources中,一切就完成了。 想来(偷懒,不想Google继续看不懂),CompileSources就是放置这些需要编译的文件,.h、.m和委屈。 会不定期的推出,项目打包后依然存在。

添加其他格式的资源文件的过程大致相同,不再赘述。

参考链接

2、iOS中使用UIWebView的loadHTMLString后图文不平衡的解决办法

在iOS中使用UIWebView的loadHTMLString后,图片和文字不平衡。 图片太大,超出屏幕,文字太小; 或者图片太小,文字太大,其实很不协调。 我们的要求是让图片的大小随着屏幕的变化而变化,即动态适应屏幕; 这样,文字的字体就可以自己控制了,可以大也可以小。 为了达到这个效果,我们需要在使用loadHTMLString加载字符串之前对其进行处理。 怎么处理呢? 什么原则?

NSString *htmls = [NSString stringWithFormat:@" n"
                           " n"
                           " n"
                           "body {font-size:15px;}n"
                           " n"
                           " n"
                           ""
                           ""
                           "window.onload = function(){n"
                           "var $img = document.getElementsByTagName('img');n"
                           "for(var p in  $img){n"
                              " $img[p].style.width = '100%%';n"
                               "$img[p].style.height ='auto'n"
                           "}n"
                           "}"
                           "%@"
                           ""
                           "",htmlString];

原理是用for循环获取所有图片,对每张图片处理一次,使图片的宽度为100%,也就是适应屏幕的长度; 让图片的高度手动调整。 文字的字体大小可以改为font-size:15px,这里我用的是15px。 根据您的具体需要更改它。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html ios加载本地html-如何将本地html、图片、js、css文件引入到iOS的webView中 https://www.wkzy.net/game/183003.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务