从资源加载JavaScript到UIWebView

我需要从我的应用程序资源文件夹加载JavaScript文件。 截至目前,它确实从资源中读取图像,但是由于某种原因,它并没有阅读javascripts。

我已经能够呈现html文档引用这些JavaScript如果HTML文件本身写入到资源,但我想通过设置一个UIWebView的HTML,因此它可以dynamic呈现HTML / JS。

这是我在做什么:

NSString * html = @"<!DOCTYPE html><html><head><title>MathJax</title></head><body><script type=\"text/x-mathjax-config\">MathJax.Hub.Config({tex2jax: {inlineMath: [[\"$\",\"$\"],[\"\\(\",\"\\)\"]]}});</script><script type=\"text/javascript\" src=\"/MathJax/MathJax.js\"></script>$$\\int_x^yf(x) dx$$<img src=\"coffee.png\"></body></html>"; NSString * path = [[NSBundle mainBundle] resourcePath]; path = [path stringByReplacingOccurrencesOfString:@"/" withString:@"//"]; path = [path stringByReplacingOccurrencesOfString:@" " withString:@"%20"]; NSString * resourcesPath = [[NSString alloc] initWithFormat:@"file://%@/", path]; [webview loadHTMLString:html baseURL:[NSURL URLWithString:resourcesPath]]; 

现在,如果我更改基本url到我的服务器也有所需的文件,它确实加载正确。 不需要互联网连接将是伟大的。 任何帮助表示赞赏! ;)

我发现这对获取图像显示很有用: iPhone Dev:UIWebView baseUrl到Documents文件夹中的资源不是应用程序包

编辑:

而不是做stringreplace和URL编码,我能够通过简单地调用mainBundle上的resourceURL来获取图像,但仍然没有JavaScript执行。

  NSString * setHtml = @"<!DOCTYPE html><html><head><title>MathJax</title></head><body><script type=\"text/x-mathjax-config\">MathJax.Hub.Config({tex2jax: {inlineMath: [[\"$\",\"$\"],[\"\\(\",\"\\)\"]]}});</script><script type=\"text/javascript\" src=\"/MathJax/MathJax.js\"></script>$$\\int_x^yf(x) dx$$<img src=\"images/test.png\"></body></html>"; [webview loadHTMLString:setHtml baseURL:[[NSBundle mainBundle] resourceURL]]; 

编辑

如果你想帮助一下,我通过创build一个示例项目让你更轻松!

https://github.com/pyramation/math-test

 git clone git@github.com:pyramation/math-test.git 

在这里我们进行一个简单的设置。

在您的资源文件夹中创build以下文件夹结构。

请注意,蓝色文件夹是被引用的

在这里输入图像说明

CSS只是糖果:)在lib.js驻留您的JavaScript代码,你想使用。

的index.html

 <html> <head> <link rel="stylesheet" type="text/css" href="css/standard.css"> <script src="js/lib.js" type="text/javascript" /> </head> <body> <h2>Local Javascript</h2> <a href="javascript:alert('Works!')">Test Javascript Alert</a> <br/> <br/> <a href="javascript:alertMeWithMyCustomFunction('I am');">External js test</a> </body> </html> 

lib.js

 function alertMeWithMyCustomFunction(text) { alert(text+' -> in lib.js'); } 

在webview中加载内容

注意:webView是一个属性,使用实例构build器创build的视图

 - (void)viewDidLoad { NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"/htdocs" ]; NSString *html = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil]; [webView loadHTMLString:html baseURL:[NSURL fileURLWithPath: [NSString stringWithFormat:@"%@/htdocs/", [[NSBundle mainBundle] bundlePath]]]]; } 

这应该是结果:

在这里输入图像说明在这里输入图像说明

编辑:

snowman4415提到iOS 7不喜欢自我closures标签脚本标签,所以如果iOS 7不能正常工作,可能需要使用</script>closures标签。

这是另一种将本地JavaScript文件注入到Web视图的DOM中的方法。 将JS文件的内容加载到string中,然后使用stringByEvalutatingJavaScriptFromString

 - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *jsFile = @"jquery-1.8.2.min.js"; NSString *jsFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil]; NSURL *jsURL = [NSURL fileURLWithPath:jsFilePath]; NSString *javascriptCode = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil]; [webView stringByEvaluatingJavaScriptFromString:javascriptCode]; // ... } 

当你不拥有你正在显示的* .html / xhtml文件(即ePub阅读器或新闻聚合器)时,这是特别有用的。 这有助于您不必担心从您的xhtml文件到您的js文件的相对path。

这是我如何使用Webview和本地JS。 在这里把一些快照放在这里一个示例项目

资源

 // Get the path for index.html, where in which index.html has reference to the js files, since we are loading from the proper resource path, the JS files also gets picked up properly from the resource path. func loadWebView(){ if let resourceUrl = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "WebDocs2"){ let urlRequest = URLRequest.init(url: resourceUrl) myWebView.loadRequest(urlRequest) } } 

 // Load the JS from resources func jsScriptText() -> String? { guard let jsPath = Bundle.main.path(forResource: "hello", ofType: "js", inDirectory: "WebDocs2/scripts") else { return nil } do { let jsScript = try String(contentsOfFile: jsPath, encoding: String.Encoding.utf8) return jsScript }catch{ print("Error") return nil } } // Run the java script func runJS(){ if let jsScript = jsScriptText(){ let jsContext = JSContext() _ = jsContext?.evaluateScript(jsScript) let helloJSCore = jsContext?.objectForKeyedSubscript("helloJSCore") let result = helloJSCore?.call(withArguments: []) print(result?.toString() ?? "Error") } } 

在swift 3.x中,我们可以使用用于在UIWebview显示脚本的loadHTMLString(_ string: String, baseURL: URL?)函数

  @IBOutlet weak var webView : UIWebView! class ViewController: UIViewController,UIWebViewDelegate { override func viewDidLoad() { super.viewDidLoad() webView.delegate = self } func loadWebView() { webView.loadHTMLString("<p>Hello, How are you doing?.</p>" , baseURL: nil) } func webViewDidFinishLoad(_ webView: UIWebView) { webView.frame.size.height = 1 webView.frame.size = webView.sizeThatFits(.zero) } } 

注意: – 我们可以像上面在webViewDidFinishLoad方法中提到的那样设置UIWebView的高度