Bind a native iOS event to a webView using a custom Cordova plugin

问题

I have to create a plugin to catch events occurring in the Cordova webView of my iOS application and trigger actions in the native part of the app, and vice versa.

I have followed this tutorial and it works perfectly.

When I try to adapt it to another app (I wanted it more general than the tutorial is), it works from the webView to the native part, but not the other way.

I am just trying to click on a button on a navigationBar to change the background color of my webView. At the moment, it seems that the javascript code of the plugin doesnt receive the event, because only the iOS logs are displayed.

All my code is in XCode so I can not see any warning/errors from the web part.

Here is the iOS part of the plugin:

@interface HybridBridge()

@property (nonatomic, retain) NSString *listenerCallbackId;

@end

@implementation HybridBridge

-(void)bindAction:(CDVInvokedUrlCommand*) command{

    self.listenerCallbackId = command.callbackId;

    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
    [pluginResult setKeepCallbackAsBool:true];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

-(void)reportEvent:(NSDictionary*)eventData{
    CDVPluginResult *pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDictionary:eventData];
    [pluginResult setKeepCallbackAsBool:true];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:self.listenerCallbackId];
}

Here is the javascript part of the plugin:

var HybridBridge = (function() {
    var PLUGIN_NAME                         = "HybridBridge";
    var ACTION_BIND_LISTENER                = "bindAction";

    this.bindListener = function(listener) {
        cordova.exec(listener, listener, PLUGIN_NAME, ACTION_BIND_LISTENER, []);
    };

    return this;
}());

Here is the javascript event listener:

var NativeEventsListener = (function() {

    this.onReceivedEvent = function(eventData) {

        var eventHandler = function(){};

        switch (eventData.eventType){
            case "colorButtonClicked":
                eventHandler = colorButtonClickEvent;
                break;
            default: 
        }
        eventHandler(eventData);
    };

    function colorButtonClickEvent(eventData){
        changeBackgroundColor(eventData.color);

    }

    function changeBackground(color) {
        document.body.style.background = color;
    }

    return this;
}());

Here is the main.js file where be bind the event listener to the plugin:

function wlCommonInit(){    

    HybridBridge.bindListener(NativeEventsListener.onReceivedEvent);
}

function wlEnvInit(){
    wlCommonInit();
}

And finally here is the plugin call in objective-C:

- (IBAction)changeWebPageColor {
    redColor = !redColor;
    NSString *color = redColor ? @"red" : @"white";
    HybridBridge *bridge = [self.pluginObjects objectForKey:@"HybridBridge"];
    NSDictionary *eventData = [NSDictionary dictionaryWithObjectsAndKeys:
                               @"colorButtonClicked", @"eventType",
                               color, @"color",
                               nil];
    [bridge reportEvent:eventData];
}

Thank you for your help!

回答1:

Try implement this example into your project.

make sure you already define your plugin in your config.xml

<feature name="CustomPlugin">
      <param name="ios-package" value="CustomPlugin" />
</feature>

Implementing the plug-in by using Objective-C code

CustomPlugin.h

#import <Foundation/Foundation.h>
#import <Cordova/CDV.h>

@interface CustomPlugin : CDVPlugin

- (void)sayHello:(CDVInvokedUrlCommand*)command;

@end

CustomPlugin.m

#import "CustomPlugin.h"

    @implementation CustomPlugin

    - (void)sayHello:(CDVInvokedUrlCommand*)command{

        NSString *responseString =
            [NSString stringWithFormat:@"Hello World, %@", [command.arguments objectAtIndex:0]];

        CDVPluginResult *pluginResult =
            [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:responseString];

        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
    }

    @end

Calling a plug-in from JavaScript

function initial(){
    var name = $("#NameInput").val();
    cordova.exec(sayHelloSuccess, sayHelloFailure, "CustomPlugin", "sayHello", [name]);
}

function sayHelloSuccess(data){
    alert("OK: " + data);
}

function sayHelloFailure(data){
    alert("FAIL: " + data);
}

来源：https://stackoverflow.com/questions/22775349/bind-a-native-ios-event-to-a-webview-using-a-custom-cordova-plugin