標籤：cape created 按鈕 添加 ios 程式 meta adr 擷取
目標
本文介紹利用蘋果在iOS7時發布的JavaScriptCore.framework架構進行js與OC的互動。我們想要達到的目標是：
準備環境JavaScriptCore是webkit的一個重要組成部分，主要是對js進行解析和提供執行環境。
具體介紹請看這篇簡書的文章:JavaScriptCore 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS與OC互動</title>
<!-- 定義js函數 -->
<script type="text/JavaScript">
function test1()
{
alert("我是被OC調用的js方法")
}
</script>
</head>
<body>
<br /><br /><br /><br />
<!-- 建立一個按鈕，點擊就調用 printHelloWorld() 方法 -->
<button onclick="printHelloWorld()">在Xcode控制台列印HelloWold</button>
</body>
</html>
html的代碼很簡單
首先是在head裡面定義了一個js函數test1()。調用這個函數會彈出一個alert視窗。
<!-- 定義js函數 -->
<script type="text/JavaScript">
function test1()
{
alert("我是被OC調用的js方法")
}
</script>
body裡面建立了一個按鈕，點擊按鈕會調用printHelloWorld()方法。這裡沒有定義這個方法的實現，等下我們會在OC代碼中定義
<!-- 建立一個按鈕，點擊就調用 printHelloWorld() 函數 -->
<button onclick=" printHelloWorld() ">在Xcode控制台列印HelloWold</button>
好了，現在我們可以載入這個本地html檔案了。
//
// ViewController.m
// JS與OC互動Demo
//
// Created by 石學謙 on 16/7/9.
// Copyright ? 2016年 shixueqian. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()<UIWebViewDelegate>
//webView
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//設定webView代理
self.webView.delegate = self;
//擷取本地html路徑
NSString *path = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
//中文路徑要轉碼
path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
//載入html
NSURL *url = [NSURL URLWithString:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁載入完成");
}
@end
環境準備完成，開工
OC調用網頁上的JS方法我們的html檔案定義了一個js方法test1()，現在我們就來調用這個方法
在ViewController.m匯入標頭檔#import <JavaScriptCore/JavaScriptCore.h>。
寫代碼
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁載入完成");
[self demo1];
}
- (void)demo1 {
//建立JSContext對象，（此處通過當前webView的鍵擷取到jscontext）
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.JavaScriptContext"];
//OC調用JS方法
[context evaluateScript:@"test1()"];
}
運行之後會彈出一個alert視窗，證明html上的js方法test1被調用了
上面的代碼都是無參的，加入是有參數的呢？
我們在html檔案中加一個js方法test3(a,b)。方法有兩個參數。
<!-- 定義js函數 -->
<script type="text/JavaScript">
function test3(a,b)
{
alert("我是被OC調用的js方法" + a + b)
}
</script>
然後在ViewController.m裡面調用
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁載入完成");
// [self demo1];
[self demo2];
}
//OC調用有多個參數的JS方法
- (void)demo2 {
//建立JSContext對象
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.JavaScriptContext"];
[context evaluateScript:@"test1(/"我是參數a/",/"我是參數b/")"];
}
運行結果為：
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁載入完成");
// [self demo1];
// [self demo2];
[self demo3];
}
//OC調用OC代碼寫出來的js方法
- (void)demo3 {
//建立JSContext對象
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.JavaScriptContext"];
//JS代碼
NSString *jsCode = [NSString stringWithFormat:@"alert(/"我是OC裡面的js方法/")"];
//OC調用JS方法
[context evaluateScript:jsCode];
}
運行結果如下：
轉載 【iOS開發】網頁JS與OC互動（JavaScriptCore） OC ----->JS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
