zoukankan      html  css  js  c++  java
  • 关于UIWebView与js交互的问题

    这个问题,在网上能看到不少,主要通过调用UIWebView的一个方法stringByEvaluatingJavaScriptFromString

    来实现,与js的交互问题,我想可能用的过程中会出现不少问题,所以,先开个文章来存放,等过2天用的时候写个问题,总结下遇到的问题或者经验什么的。

    http://www.cnblogs.com/zhwl/archive/2013/04/19/3030244.html

    这个网址里的内容不错,不少使用上面所说的那个方法,而且不只是单单的用oc调用js,还有用js调用oc!

    在写 JavaScript 的时候,可以使用一个叫做 window 的对象,像是我们想要从现在的网页跳到另外一个网页的时候,就会去修改 window.location.href 的位置;在我们的 Oective C 程序码中,如果我们可以取得指定的 WebView 的指标,也就可以拿到这个出现在 JavaScript 中的 window 对象,也就是 [webView windowScriptOect]。

    这个对象就是 WebView 里头的 JS 与我们的 O C 程序之间的桥樑-window 对象可以取得网页里头所有的 JS 函数与对象,而如果我们把一个 O C 对象设定成 windowScriptOect 的 value,JS 也便可以调用 O C 对象的 method。于是,我们可以在 O C 程序里头要求 WebView 执行一段 JS,也可以反过来让 JS 调用一段用 O C 实作的功能。

    ※ 用 Oective C 取得与设定 JavaScript 对象

    要从 O C 取得网页中的 JavaScript 对象,也就是对 windowScriptOect 做一些 KVC 调用,像是 valueForKey: 与 valueForKeyPath:。如果我们在 JS 里头,想要知道目前的网页位置,会这麽写:

    varlocation = window.location.href;
    

    用 OC 就可以这麽调用:

    NSString*location = [[webView windowScriptOect] valueForKeyPath:@"location.href"];

    如果我们要设定 window.location.href,要求开启另外一个网页,在 JS 里头:

    window.location.href ='http://spring-studio.net';

    O C:

    [[webView windowScriptOect] setValue:@"http://spring-studio.net"forKeyPath:@"location.href"];
    

    由于 O C 与 JS 本身的语言特性不同,在两种语言之间相互传递东西之间,就可以看到两者的差别-

    • JS 虽然是 OO,但是并没有 class,所以将 JS 对象传到 O C 程序里头,除了基本字串会转换成 NSString、基本数字会转成 NSNumber,像是 Array 等其他对象,在 O C 中,都是 WebScriptOect 这个 Class。意思就是,JS 的 Array 不会帮你转换成 NSArray。
    • 从 JS 里头传一个空对象给 O C 程序,用的不是 O C 里头原本表示「没有东西」的方式,像是 NULL、nil、NSNull 等,而是专属 WebKit 使用的 WebUndefined。 

    所以,如果我们想要看一个 JS Array 里头有什麽东西,就要先取得这个对象里头叫做 length 的 value,然后用 webScriptValueAtIndex: 去看在该 index 位置的内容。假如我们在 JS 里头这样写:

    varJSArray = {'zonble','dot','net'};
    for(vari = 0; i < JSArray.length; i++) {
        console.log(JSArray[i]);
    }

    O C 里头就会变成这样:

    WebScriptOect *O = (WebScriptOect *)JSArray;
    NSUIntegercount = [[O valueForKey:@"length"] integerValue];
    NSMutableArray*a = [NSMutableArrayarray];
    for(NSUIntegeri = 0; i < count; i++) {
        NSString*item = [O webScriptValueAtIndex:i];
        NSLog(@"item:%@", item);
    }

     ※ 用 Oective C 调用 JavaScript function

    要用 O C 调用网页中的 JS function,大概有几种方法。第一种是直接写一段跟你在网页中会撰写的 JS 一模一样的程序,叫 windowScriptOect 用 evaluateWebScript: 执行。例如,我们想要在网页中产生一个新的 JS function,内容是:

    functionx(x) {
        returnx + 1;
    }
    

    所以在 O C 中可以这样写;

    [[webView windowScriptOect] evaluateWebScript:@"function x(x) { return x + 1;}"];

    接下来我们就可以调用 window.x(): 

    NSNumber*result = [[webView windowScriptOect] evaluateWebScript:@"x(1)"];
    NSLog(@"result:%d", [result integerValue]);// Returns 2

    由于在 JS 中,每个 funciton 其实都是对象,所以我们还可以直接取得 window.x 叫这个对象执行自己。在 JS 里头如果这样写:

    window.x.call(window.x, 1);

    O C 中便是这样:

    WebScriptOect *x = [[webView windowScriptOect] valueForKey:@"x"];
    NSNumber*result = [x callWebScriptMethod:@"call"withArguments:[NSArrayarrayWithOects:x, [NSNumbernumberWithInt:1],nil]];

    这种让某个 WebScriptOect 自己执行自己的写法,其实比较不会用于从 O C 调用 JS 这一端,而是接下来会提到的,由 JS 调用 O C,因为这样 JS 就可以把一个 callback function 送到 O C 程序里头。

    如果我们在做网页,我们只想要更新网页中的一个区块,就会利用 AJAX 的技巧,只对这个区块需要的资料,对 server 发出 request,并且在 request 完成的时候,要求执行一段 callback function,更新这一个区块的显示内容。从 JS 调用 O C也可以做类似的事情,如果 O C 程序里头需要一定时间的运算,或是我们可能是在 O C 里头抓取网路资料,我们便可以把一个 callback function 送到 O C 程序裡,要求 O C 程序在做完工作后,执行这段 callback function。

    ※ DOM

    WebKit 里头,所有的 DOM 对象都继承自 DOMObject,DOMObject 又继承自 WebScriptObject,所以我们在取得了某个 DOM 对象之后,也可以从 Obj C 程序中,要求这个 DOM 对象执行 JS 程序。

    假如我们的网页中,有一个 id 叫做 “#s” 的文字输入框(text input),而我们希望现在键盘输入的焦点放在这个输入框上,在 JS 里头会这样写:

    document.querySelector('#s').focus();
    

    Obj C:

    DOMDocument *document = [[webView mainFrame] DOMDocument];
    [[document querySelector:@"#s"] callWebScriptMethod:@"focus"withArguments:nil];
    

    ※ 用 JavaScript 存取 Objective C 的 Value

    要让网页中的 JS 程序可以调用 Obj C 对象,方法是把某个 Obj C 对象注册成 JS 中 window 对象的属性。之后,JS 便也可以调用这个对象的 method,也可以取得这个对象的各种 Value,只要是 KVC 可以取得的 Value,像是 NSString、NSNumber、NSDate、NSArray、NSDictionary、NSValue…等。JS 传 Array 到 ObjC 时,还需要特别做些处理才能变成 NSArray,从 Obj C 传一个 NSArray 到 JS 时,会自动变成 JS Array。

    首先我们要注意的是将 Obj C 对象注册给 window 对象的时机,由于每次重新载入网页,window 对象的内容都会有所变动-毕竟每个网页都会有不同的 JS 程序,所以,我们需要在适当的时机做这件事情。我们首先要指定 WebView 的 frame loading delegate(用 setFrameLoadDelegate:),并且实作 webView:didClearWindowObject:forFrame:,WebView 只要更新了 windowScriptObject,就会调用这一段程序。假如我们现在要让网页中的 JS 可以使用目前的 controller 对象,会这样写:

    - (void)webView:(WebView *)sender didClearWindowObject:(WebScriptObject *)windowObject forFrame:(WebFrame *)frame
    {
        [windowObject setValue:selfforKey:@"controller"];
    }

    如此一来,只要调用 window.controller,就可以调用我们的 Obj C 对象。假如我们的 Obj C Class 里头有这些成员变数:

    @interfaceMyController :NSObject
    {
        IBOutletWebView *webView;
        IBOUtlet NSWindow*window;
        NSString*stringValue;
        NSIntegernumberValue;
        NSArray*arrayValue;
        NSDate*dateValue;
        NSDictionary*dictValue;
        NSRectframeValue;
    }
    @end

    指定一下 Value:

    stringValue =@"string";
    numberValue = 24;
    arrayValue = [[NSArrayarrayWithObjects:@"text", [NSNumbernumberWithInt:30],nil] retain];
    dateValue = [[NSDatedate] retain];
    dictValue = [[NSDictionarydictionaryWithObjectsAndKeys:@"value1",@"key1",@"value2",@"key2",@"value3",@"key3",nil] retain];
    frameValue = [window frame];

    用 JS 读读看:

    varc = window.controller;
    varmain = document.getElementById('main');
    varHTML ='';
    if(c) {
        HTML +='<p>'+ c.stringValue +'<p>';
        HTML +='<p>'+ c.numberValue +'<p>';
        HTML +='<p>'+ c.arrayValue +'<p>';
        HTML +='<p>'+ c.dateValue +'<p>';
        HTML +='<p>'+ c.dictValue +'<p>';
        HTML +='<p>'+ c.frameValue +'<p>';
        main.innerHTML = HTML;
    }

    结果如下:

    string24text,302010-09-09 00:01:04 +0800{ key1 = value1; key2 = value2; key3 = value3; }NSRect: {{275, 72}, {570, 657}}

    不过,如果你看完上面的范例,就直接照做,应该不会直接成功出现正确的结果,而是会拿到一堆 undefined,原因是,Obj C 对象的 Value 预设被保护起来,不会让 JS 直接存取。要让 JS 可以存取 Obj C 对象的 Value,需要实作 +isKeyExcludedFromWebScript: 针对传入的 Key 一一处理,如果我们希望 JS 可以存取这个 key,就回传 NO:

    + (BOOL)isKeyExcludedFromWebScript:(constchar*)name
    {
        if(!strcmp(name,"stringValue")) {
            returnNO;
        }
        returnYES;
    }

    除了可以读取 Obj C 对象的 Value 外,也可以设定 Value,相当于在 Obj C 中使用 setValue:forKey:,如果在上面的 JS 程序中,我们想要修改 stringValue,直接调用 c.stringValue = ‘new value’ 即可。像前面提到,在这裡传给 Obj C 的 JS 对象,除了字串与数字外,class 都是 WebScriptObject,空对象是 WebUndefined。

    ※ 用 JavaScript 调用 Objective C method

    Obj C 的语法沿袭自 SmallTalk,Obj C 的 selector,与 JS 的 function 语法有相当的差异。WebKit 预设的实作是,如果我们要在 JS 调用 Obj C selector,就是把所有的参数往后面摆,并且把所有的冒号改成底线,而原来 selector 如果有底线的话,又要另外处理。假使我们的 controller 对象有个 method,在 Obj C 中写成这样:

    - (void)setA:(id)a b:(id)b c:(id)c;

    在 JS 中就这麽调用:

    controller.setA_b_c_('a','b','c');

    实在有点丑。所以 WebKit 提供一个方法,可以让我们把某个 Obj C selector 变成好看一点的 JS function。我们要实作 webScriptNameForSelector:

    + (NSString*)webScriptNameForSelector:(SEL)selector
    {
        if(selector ==@selector(setA:b:c:)) {
            return@"setABC";
        }
        returnnil;
    }

    以后就可以这麽调用:

    controller.setABC('a','b','c');
    

    我们同样可以决定哪些 selector 可以给 JS 使用,哪些要保护起来,方法是实作 isSelectorExcludedFromWebScript:。而我们可以改变某个 Obj C selector 在 JS 中的名称,我们也可以改变某个 value 的 key,方法是实作 webScriptNameForKey:。

    有几件事情需要注意一下:

    用 JavaScript 调用 Objective C 2.0 的 property

    在上面,我们用 JS 调用 window.controller.stringValue,与设定里头的 value 时,这边很像我们使用 Obj C 2.0 的语法,但其实做的是不一样的事情。用 JS 调用 controller.stringValue,对应到的 Obj C 语法是 [controller valueForKey:@"stringValue"],而不是调用 Obj C 对象的 property。

    如果我们的 Obj C 对象有个 property 叫做 stringValue,我们知道,Obj C property 其实会在编译时,变成 getter/setter method,在 JS 里头,我们便应该要调用 controller.stringValue() 与 controller.setStringValue_()。

    后面的一些就不转贴了,有兴趣的去连接里面查看。没有机器暂时无法知道调试结果。

    —————————————————————————————————————————————————————————————————————————————————

    UIWebView 接管js调用的alert

     http://blog.sina.com.cn/s/blog_6796844601010nxj.html

    js oc 互调

    http://hi.baidu.com/sadusaga/item/9fabbabb28e826e94fc7fded

    Objective-C与js相互调用及传参数注意

    http://www.linuxidc.com/Linux/2013-06/85736.htm

  • 相关阅读:
    互联网协议入门
    【HTTP】图解HTTPS
    《计算机本科生理想的学习计划》
    VC++ TinyXML
    TinyXML 在vs2010 VC++使用
    Hadoop2.4.1入门实例:MaxTemperature
    xcode6
    Android利用广播监听设备网络连接(断网)的变化情况
    编程算法
    Google的Guava之IO升华
  • 原文地址:https://www.cnblogs.com/lingzhiguiji/p/3578253.html
Copyright © 2011-2022 走看看