`

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



分享到：
| ios:beehive
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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”压缩包中，我们有两个关键文件：`...

Magicbox
Global site tag (gtag.js) - Google Analytics