web-dev-qa-db-ja.com

リソースからJavaScriptをUIWebViewにロードする

アプリのリソースフォルダーからJavaScriptファイルを読み込む必要があります。現在のところ、リソースから画像を正常に読み取っていますが、何らかの理由でJavaScriptを読み取っていません。

HTMLファイル自体がリソースに書き込まれている場合、これらのJavaScriptを参照する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 Documents folder内のリソースに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 [email protected]:pyramation/math-test.git
javascriptxcodeiosresourcesmathjax
24
pyramation

ここでは簡単な設定を行います。

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はプロパティであり、インスタンスビルダーで作成されたビューです。

- (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 hereenter image description here

編集：

snowman4415は、iOS 7は自己終了タグスクリプトタグを好まないので、iOS 7で何かが機能しない場合は、</script>

50
Nick Weaver

ローカルの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ファイルへの相対パスを気にする必要がなくなります。

15
TPoschel

これは、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
anoop4real

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

注：-UIViewの高さは、上記のwebViewDidFinishLoadメソッドで設定できます。

0
Jack

strong textstringByEvaluatingJavaScriptFromString（）メソッドを使用して、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];

enter image description here

注stringByEvaluatingJavaScriptFromString：メソッドは、JavaScriptの評価が完了するまで同期的に待機します。確認していないJavaScriptコードを含むWebコンテンツをロードする場合、このメソッドを呼び出すとアプリがハングする可能性があります。ベストプラクティスは、WKWebViewクラスを採用し、代わりにevaluateJavaScript：completionHandler：メソッドを使用することです。ただし、WKWebViewはiOS 8.0以降で使用できます。

0
Mr.Javed Multani