从资源将javascript加载到UIWebView中

时间:2011-04-20 16:54:30

标签: javascript xcode ios resources mathjax

我需要从我的应用资源文件夹中加载javascript文件。截至目前,它确实从资源中读取图像,但由于某种原因,它不会读取javascripts。

如果html文件本身被写入资源,我已经能够呈现引用这些javascripts的html文档,但我想通过设置UIWebView的html来呈现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^y f(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]];

现在,如果我将基本网址更改为具有所需文件的服务器,则会正确加载。不需要互联网连接会很棒。任何帮助表示赞赏! ;)

我发现这对于显示图像非常有用:iPhone Dev: UIWebView baseUrl to resources in Documents folder not App bundle

修改

我没有进行字符串替换和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^y f(x) dx$$<img src=\"images/test.png\"></body></html>";
    [webview loadHTMLString:setHtml baseURL:[[NSBundle mainBundle] resourceURL]];

修改

如果你想帮助我做一个镜头,我通过创建一个示例项目让你更容易!

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

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

5 个答案:

答案 0 :(得分:50)

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

在Resources文件夹中创建以下文件夹结构。

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

enter image description here

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是一个属性,使用实例构建器

创建的视图
- (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]]]];
}

这应该是结果:

enter image description here enter image description here

编辑:

snowman4415提到iOS 7不喜欢自动关闭标签脚本标签,因此如果某些内容无法在iOS 7上运行,您可能需要使用</script>

关闭标签

答案 1 :(得分:15)

这是将本地javascript文件注入Web视图的DOM的另一种方法。您将JS文件的内容加载到字符串中,然后使用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文件的相对路径。

答案 2 :(得分:3)

这就是我使用Webview和本地JS的方式。将一些快照放在示例项目here

Resources

// 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")

    }
}

答案 3 :(得分:0)

在swift 3.x中我们可以使用loadHTMLString(_ string: String, baseURL: URL?) 用于在UIWebview

中显示脚本的函数
 @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)
     }
    }
  

注意: - 我们可以设置UIWebView的高度,如上所述   webViewDidFinishLoad方法

答案 4 :(得分:0)

强文本我们可以使用stringByEvaluatingJavaScriptFromString()方法在UIWebView上运行自定义JavaScript。此方法返回运行在script参数中传递的JavaScript脚本的结果,如果脚本失败则返回nil。

快速

从字符串加载脚本

webview.stringByEvaluatingJavaScriptFromString(“alert(‘This is JavaScript!’);”) 

从本地文件加载脚本

//Suppose you have javascript file named "JavaScript.js" in project.
let filePath = NSBundle.mainBundle().pathForResource("JavaScript", ofType: "js")
        do {
let jsContent = try String.init(contentsOfFile: filePath!, encoding:
NSUTF8StringEncoding)
webview.stringByEvaluatingJavaScriptFromString(jsContent)
        }
catch let error as NSError{
            print(error.debugDescription)
}

Objective-C

从字符串加载脚本

[webview stringByEvaluatingJavaScriptFromString:@”alert(‘This is JavaScript!’);”];

从本地文件加载脚本


//Suppose you have javascript file named "JavaScript.js" in project.
NSString *filePath = [[NSBundle mainBundle] pathForResource:@”JavaScript” ofType:@”js”];
NSString *jsContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[webview stringByEvaluatingJavaScriptFromString:jsContent];

enter image description here

注意:stringByEvaluatingJavaScriptFromString:方法同步等待JavaScript评估完成。如果加载未审核其JavaScript代码的Web内容,则调用此方法可能会挂起您的应用程序。最佳实践是采用WKWebView类,并改用其validateJavaScript:completionHandler:方法。但是WKWebView在iOS 8.0和更高版本中可用。