详解iOS加载本地HTML，css，js_ioswebviewsomethingwentwrong资源-CSDN文库

82 浏览量 2021-01-20 10:28:07 上传评论收藏 171KB PDF 举报

在IOS开发中，可以通过webView来加载HTML文件步骤如下： 1.需要有一个webView，可以通过storyboard拖拽一个或者 alloc 一个（我在这里是拖拽了一个），是否要给webView设置delegate ，根据自己的需要决定（如果只是展示页面可以忽略）。 2.创建HTML文件、CSS文件、js文件，同样的创建方式，只是后缀名不同。 New File -> Other ->Empty 创建HTML文件后缀名为：html，创建css文件后缀名为css，创建js文件后缀名为：js 这是创建完成后的样子 3.在HTML文件，css文件，js文件中写入我们的代码在iOS应用开发中，加载本地HTML、CSS和JavaScript文件是一个常见的需求，这通常涉及到使用UIWebView或WKWebView组件来呈现自定义的用户界面。UIWebView是苹果提供的一个控件，它能够加载并显示HTML内容，同时也支持与JavaScript的交互。在本教程中，我们将详细讲解如何在iOS应用中实现这个功能。我们需要创建UIWebView实例。这可以通过故事板（Storyboard）直接拖拽一个UIWebView控件到视图上，或者在代码中动态创建。例如，如果你在故事板中添加了UIWebView，你可以通过IBOutlet连接到你的UIViewController子类；如果你在代码中创建，可以使用`alloc-init`方法初始化一个新的UIWebView对象。至于是否设置代理（delegate），这取决于你的需求。如果只需要简单地显示HTML内容，不处理任何交互，那么设置代理是可选的。接下来，我们需要创建HTML、CSS和JavaScript文件。这些文件可以使用Xcode的“New File”菜单创建，选择"Other"分类下的"Empty"模板，然后分别指定不同的文件扩展名：`.html`、`.css`和`.js`。例如，我们可以创建一个名为`index1.html`的HTML文件，引入一个`index1.css`的样式表文件和一个`index1.js`的JavaScript文件。 HTML文件内容示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>第一个HTML</title> <link rel="stylesheet" type="text/css" href="index1.css"> <script type="text/javascript" src="index1.js"></script> </head> <body> <h1>我是HTML</h1> <p id="p">p标签</p> <img id="img" src="image.png" alt="百度LOGO"> <a id="a" href="http://baidu.com">我要到百度</a> <button onclick="hello()">点击我弹出hello</button> </body> </html> ``` 在CSS文件中，我们定义元素的样式，例如： ```css #p { color: red; } #img { width: 120px; height: 50px; } #a { color: yellow; } ``` 在JavaScript文件中，我们可以编写处理事件的函数，比如弹窗提示： ```javascript function hello() { alert("hello"); } ``` 加载HTML文件时，我们可以在UIViewController的`viewDidLoad`方法中进行。获取应用程序的主bundle路径，然后创建一个基础URL，接着获取HTML文件的路径，并读取其内容。调用`loadHTMLString:baseURL:`方法加载HTML字符串： ```swift let path = Bundle.main.bundlePath let baseURL = URL(fileURLWithPath: path) if let htmlPath = Bundle.main.path(forResource: "index1", ofType: "html") { let htmlContent = String(contentsOfFile: htmlPath, encoding: .utf8) webView.loadHTMLString(htmlContent ?? "", baseURL: baseURL) } ``` 运行应用后，你将看到HTML页面加载出来，样式由CSS定义，按钮的点击事件也能够正常触发JavaScript函数。如果HTML页面中包含与JavaScript的交互，如点击链接或按钮，我们可以利用UIWebView的代理方法`webView:shouldStartLoadWithRequest:navigationType:`来捕获这些交互。设置UIWebView的代理，并实现该方法，以便在用户点击链接或触发其他导航事件时进行响应： ```swift extension ViewController: UIWebViewDelegate { func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool { let url = request.url // 处理你的逻辑，比如识别点击事件，跳转等 return true // 默认返回true，允许加载请求 } } ``` 这样，我们就成功地在iOS应用中加载并展示了本地的HTML、CSS和JavaScript文件，实现了页面的渲染以及与JavaScript的交互。需要注意的是，随着iOS的发展，UIWebView已经被WKWebView所取代，因为WKWebView提供了更好的性能和安全特性。不过，上述步骤对于理解基本原理仍然非常有帮助。

资源详情

资源评论

资源推荐