`

ios:jsbridge

    博客分类:
  • ios
ios 
阅读更多
===================================
ExampleApp.html
===================================
<!doctype html>
<html><head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1 { color:steelblue; font-size:24px; margin-top:24px; }
button { margin:0 3px 10px; font-size:12px; }
.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
</style>
</head><body>
<h1>WebViewJavascriptBridge Demo</h1>
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
}

    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 = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    setupWebViewJavascriptBridge(function(bridge) {
var uniqueId = 1
       
        /**
         * 在页面输出日志方法
         **/
function log(message, data) {
var log = document.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
if (log.children.length) { log.insertBefore(el, log.children[0]) }
else { log.appendChild(el) }
}

bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
responseCallback(responseData)
})

document.body.appendChild(document.createElement('br'))

var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = 'Fire testObjcCallback'
callbackButton.onclick = function(e) {
e.preventDefault()
log('JS calling handler "testObjcCallback"')
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('JS got response', response)
})
}
})
</script>
<div id='buttons'></div> <div id='log'></div>
</body></html>


===================================
ViewController.m
===================================
//
//  ViewController.m
//  TestJsBridge
//
//  Created by samson on 2017/1/10.
//  Copyright © 2017年 samson. All rights reserved.
//

#import "ViewController.h"
#import "WebViewJavascriptBridge.h"

@interface ViewController ()
@property WebViewJavascriptBridge* bridge;
@end

@implementation ViewController

- (void)viewWillAppear:(BOOL)animated {
    if (_bridge) { return; }
   
    UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];
   
    [WebViewJavascriptBridge enableLogging];
   
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
    [_bridge setWebViewDelegate:self];
   
    //注册监听js事件 (监听testObjcCallback方法) js调用oc
    [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        //返回给js数据
        responseCallback(@{ @"foo":@"before ready fuck" });
    }];
   
    [_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];
   
    [self renderButtons:webView];
    [self loadExamplePage:webView];
}

- (void)webViewDidStartLoad:(UIWebView *)webView {
    NSLog(@"webViewDidStartLoad");
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"webViewDidFinishLoad");
}

- (void)renderButtons:(UIWebView*)webView {
    UIFont* font = [UIFont fontWithName:@"HelveticaNeue" size:11.0];
   
    UIButton *callbackButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [callbackButton setTitle:@"Call handler" forState:UIControlStateNormal];
    [callbackButton addTarget:self action:@selector(ocCallJsHandler:) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:callbackButton aboveSubview:webView];
    callbackButton.frame = CGRectMake(0, 400, 100, 35);
    callbackButton.titleLabel.font = font;
   
    UIButton* reloadButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [reloadButton setTitle:@"Reload webview" forState:UIControlStateNormal];
    [reloadButton addTarget:webView action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:reloadButton aboveSubview:webView];
    reloadButton.frame = CGRectMake(90, 400, 100, 35);
    reloadButton.titleLabel.font = font;
   
    UIButton* safetyTimeoutButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [safetyTimeoutButton setTitle:@"Disable safety timeout" forState:UIControlStateNormal];
    [safetyTimeoutButton addTarget:self action:@selector(disableSafetyTimeout) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:safetyTimeoutButton aboveSubview:webView];
    safetyTimeoutButton.frame = CGRectMake(190, 400, 120, 35);
    safetyTimeoutButton.titleLabel.font = font;
}

- (void)disableSafetyTimeout {
    [self.bridge disableJavscriptAlertBoxSafetyTimeout];
}

/**
* oc调用js
**/
- (void)ocCallJsHandler:(id)sender {
    id data = @{ @"greetingFromObjC": @"Hi there, JS!" };
    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
        NSLog(@"testJavascriptHandler responded: %@", response);
    }];
}

- (void)loadExamplePage:(UIWebView*)webView {
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [webView loadHTMLString:appHtml baseURL:baseURL];
}
@end



分享到:
评论

相关推荐

    zionicjs:JSBridge实现

    zionicjs 使用提示()调用本机函数的JSBridge实现。 该项目只是为了娱乐,我不是JavaScript专家。 去做 一般的在两端连接一些常用功能。 JS 使用提示拨打本地电话 安卓待定 的iOS 待定

    JSBridge::rocket:适用于Android iOS的JSBridge

    JSBridge For Android / iOS,统一易用的Javascript bridge。 需配合及使用 安装 npm $ npm i --save @hackycy/jsbridge cdn &lt;!-- production --&gt; [removed][removed] 将${version}改为可用版本号 使用 异步...

    iOS与H5界面JSBridge交互Demo

    在iOS开发中,有时我们需要将原生应用的功能与网页(H5)进行深度融合,这就涉及到iOS与H5界面之间的JSBridge交互。这个"iOS与H5界面JSBridge交互Demo"提供了一个直观且易于理解的实例,帮助开发者快速掌握两者间的...

    h5-jsbridge:Javascript桥androidios webview

    H5-JSBridgeJavascript bridge / webviewInstallnpm install h5-jsbridge --saveUseimport JsBridge from 'h5-jsbridge'/** * 函数描述:js注册方法给app调用 * * jsBridge.registerHandler(name, callback(data, ...

    DSBridge-IOS:现代的跨平台JavaScript桥,通过它,您可以在JavaScript和本机之间同步或异步调用彼此的功能

    适用于IOS的DSBridge 现代的跨平台JavaScript桥,通过它,您可以在JavaScript和本机应用程序之间同步或异步调用彼此的功能。 DSBridge-Android: : 注意 DSBridge v3.0是一个里程碑版本。 与v2.0相比,我们进行了...

    LDJSBridge_IOS:IOS平台零修改集成到产品的JSBridge简化框架

    LDJSBridge_IOS =============== LDJSBridge_IOS的核心目标是完成在IOS客户端中WAP页面和客户端(Native)的深度交互。 如何集成LDJSBridge_IOS 强烈推荐采用Pod集成:在项目工程的Podfile文件中加载LDJSBridge库: ...

    jsbridge 交互原理图

    JavaScript Bridge(JSBridge)是一种在Web应用与原生应用程序之间建立通信桥梁的技术,它使得JavaScript可以调用原生平台的功能,如访问硬件设备、系统API、处理复杂的计算任务等。在移动开发领域,JSBridge广泛...

    快速混合开发框架,JSBridge提供核心Android、iOS功能。多平台API支撑,部分兼容浏览器.zip

    JSBridge正是这种开发模式的核心组件,它在Android和iOS之间架起了一座桥梁,允许JavaScript代码调用原生平台的API,从而实现丰富的功能。 在iOS开发中,JSBridge扮演着至关重要的角色。通过JSBridge,开发者可以...

    android-jsbridge

    DSBridge是文中提及的开源库,它提供了Android和iOS平台的JSBridge实现。DSBridge-Android1.zip文件包含了DSBridge在Android上的具体实现,包括以下组件: 1. **DSBridge核心库**:实现了基本的请求处理和线程管理...

    webviewJSBridge

    WebView 是一个可以加载和展示HTML内容的组件,常见于Android和iOS平台,而JSBridge则是实现WebView与JavaScript之间通信的一种机制。本文将深入探讨"webviewJSBridge"这一主题,介绍其原理、应用场景以及如何实现。...

    jsbridge.js.zip

    **JSBridge.js.zip** 是一个包含 **jsbridge.js** 文件的压缩包,它主要用于实现JavaScript与原生iOS和Android应用之间的交互。JSBridge是移动应用开发中一个关键的技术,允许Web端(HTML5)和原生平台之间进行通信...

    Android,前端通用的JSBridge文件(iOS无需文件)

    内含Android和前端 webViewJavaScriptBridge 文件(iOS无需bridge 文件,自行架桥或者实用第三方库)。只要使用资源内的bridge文件就能完成JS交互,无需自行在写JS代码。

    基于ES6的轻量级以广播订阅模式封装的JSBridge

    《基于ES6的轻量级JSBridge:广播订阅模式封装的实践与解析》 在混合移动应用开发中,JSBridge起着至关重要的作用,它为Webview与原生端之间的通信提供了桥梁。本篇文章将深入探讨一个基于ES6的轻量级JSBridge实现...

    iosH5ForApp

    3. **JSBridge**: JSBridge是实现H5与iOS App交互的关键机制。它建立了一座桥梁,使得H5可以通过特定的API调用原生方法,同时原生代码也能调用H5中的JavaScript函数。JSBridge通常包括两个部分:在App端定义的Native...

    WKWebView下iOS与JS相互调用

    **WKWebView:iOS与JS交互实现详解** 在iOS开发中,WKWebView是苹果提供的一款用于展示网页内容的组件,它取代...在实际项目中,根据需求,你可以进一步封装这些方法,打造自己的JSBridge,提高代码复用性和可维护性。

    ios-WebViewJSBridge.zip

    1. 引入JSBridge库。 2. 注册Native方法,使JavaScript能够调用。 3. 在JavaScript中调用注册的方法,传入参数。 4. Native端接收到调用后执行相应操作,并可能需要将结果返回给JavaScript。 5. 处理返回结果,更新...

    JavaScriptBridge:适用于ios(WKWebView)和Android(WebView)JavaScript桥

    JavaScriptBridgeA JavaScript Bridge for ios(WKWebView) and Android(WebView)如何使用Js端​js端在使用前需要调用一次初始化代码// check if we are in android os// 目前一直没有找到一个稳定的无侵入的js注入点...

    vue实现与安卓、IOS交互的方法

    IOS用的是jsBridge插件实现调用、传参、回调的 安卓是在window挂载方法和挂载回调的 IOS实现方案 调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (window....

    H5与原生交互方式的需要文件

    常见的JSBridge实现有WebViewJavascriptBridge(iOS)、Android的ChromeCustomTabs、以及微信的小程序JSAPI等。 3. **调用方向**:H5调用原生和原生调用H5两种情况都需要考虑。H5调用原生通常用于执行设备特定的...

    JSBridge.zip

    JSBridge在移动应用开发中扮演着至关重要的角色,它是一种技术机制,允许原生应用程序(如Android或iOS应用)与嵌入其中的JavaScript代码进行通信。在这个“JSBridge.zip”压缩包中,我们有两个关键文件:`...

Global site tag (gtag.js) - Google Analytics