This is an https://www.baidu.com.
你好美
index
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
body{
background-color:paleturquoise;
}
button{
border:0;
width: 150px;
height: 35px;
background-color: orangered;
color: white;
font-size: 16px;
border-radius: 6px;
}
</style>
</head>
<body>
<h2>JS調(diào)用OC中的方法</h2>
<button id="btn">訪問OC相冊</button>
<button id="btn1">調(diào)用OC提示窗</button>
<p></p>
</body>
<script>
// 這段代碼是固定的,必須要放到j(luò)s中
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}0
// 與OC交互的所有JS方法都要在這里注冊,才能讓OC和JS之間相互調(diào)用
setupWebViewJavascriptBridge(function(bridge) {
/* JS給OC提供公開的API, 在OC中可以手動調(diào)用此API, 并且可以接收OC中傳過來的參數(shù),同時可回調(diào)OC */
// 獲取用戶信息
bridge.registerHandler('getUserInfo', function(data, responseCallback) {
console.log("OC中傳遞過來的參數(shù):", data);
// 把處理好的結(jié)果返回給OC
responseCallback({"userID":"DX001", "userName":"旋之華", "age":"18", "otherName":"旋之華"})
});
// 彈框輸出
bridge.registerHandler('alertMessage', function(data, responseCallback) {
alert(data);
});
// 動態(tài)跳轉(zhuǎn)到京東商城
bridge.registerHandler('pushToNewWebSite', function(data, responseCallback) {
window.location.href = data.url;
});
bridge.registerHandler('insertImgToWebPage', function(data, responseCallback) {
var img = document.createElement('img');
img.src = data.url;
img.width = 200;
document.body.appendChild(img);
});
/* OC給JS提供公開的API, 在JS中可以手動調(diào)用此API, 并且可以接收OC中傳過來的參數(shù),同時可回調(diào)OC */
// 調(diào)用OC中的打開相冊方法
document.getElementById('btn').onclick = function () {
bridge.callHandler('openCamera', {'count':'10張'}, function responseCallback(responseData) {
console.log("OC中返回的參數(shù):", responseData)
});
};
document.getElementById('btn1').onclick = function () {
bridge.callHandler('showSheet', '', function responseCallback(responseData) {
console.log("OC中返回的參數(shù):", responseData)
});
};
})
</script>
</html>
bridge 初始化
// 2.加載網(wǎng)頁
NSString *indexPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *appHtml = [NSString stringWithContentsOfFile:indexPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseUrl = [NSURL fileURLWithPath:indexPath];
[self.webView loadHTMLString:appHtml baseURL:baseUrl];
// 3.開啟日志
[WebViewJavascriptBridge enableLogging];
// 4.給webView建立JS和OC的溝通橋梁
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[self.bridge setWebViewDelegate:self];
JS調(diào)用OC的API
/* JS調(diào)用OC的API:訪問相冊 */
[self.bridge registerHandler:@"openCamera" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"需要%@圖片", data[@"count"]);
UIImagePickerController *imageVC = [[UIImagePickerController alloc] init];
imageVC.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
[self presentViewController:imageVC animated:YES completion:nil];
}];
OC調(diào)用JS的API
// 調(diào)用JS中的API
[self.bridge callHandler:@"alertMessage" data:@"調(diào)用了js中的Alert彈窗!" responseCallback:^(id responseData) {
}];