javascript - 从资源中将 javascript 加载到 UIWebView

Question

我需要从我的应用程序资源文件夹中加载 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]];

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

我发现这对显示图像很有用：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

score 50 · Accepted Answer

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

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

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

在此处输入图像描述

css 只是糖果 :) 在 lib.js 中驻留您想要使用的 javascript 代码。

索引.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]]]];
}

这应该是结果：

在此处输入图像描述

编辑：

snowman4415 提到 iOS 7 不喜欢自关闭标签脚本标签，所以如果在 iOS 7 上出现问题，您可能需要使用以下命令关闭标签</script>

score 16 · Accepted Answer

这是将本地 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 文件的相对路径。

score 3 · Accepted Answer

这就是我使用 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")

    }
}

score 0 · Accepted Answer

在 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)
     }
    }

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

score 0 · Accepted Answer

strong text我们可以使用 stringByEvaluatingJavaScriptFromString() 方法在 UIWebView 上运行自定义 JavaScript。该方法返回脚本参数中传递的 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];

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

javascript - 从资源中将 javascript 加载到 UIWebView

5 回答 5

Related

Reference