[iOS]在WebApp中如何使用JS调用iOS的函数

实现功能:点击HTML的标签,通过JS调用iOS内部的原生函数

基本流程:

先看一下Web中,我们给h1标签添加一个onclick事件,让它在被点击之后,修改当前的url。

Web中的HTML代码:

<html>
<head>
<script>

function getInfo(name)
{
	window.location = "/getInfo/"+name;
}

</script>

</head>

<body>
	<h1 onclick="getInfo(‘why‘)">Name</h1>
</body>

</html>

iOS中,先拖拽WebView,访问localhost,然后通过WebView的委托事件监听url跳转操作,并且把跳转截取下来。

也就是说,在onclick的时候,普通浏览器灰跳转到那个url,但是在iOS的这个WebView里面,这个跳转会被拦截,

用这种方式可以巧妙地实现JS调用iOS的原生代码:

//
//  DWViewController.m
//  DareWayApp
//
//  Created by why on 14-6-3.
//  Copyright (c) 2014年 DareWay. All rights reserved.
//

#import "DWViewController.h"

@interface DWViewController ()

@property (weak, nonatomic) IBOutlet UIWebView *myWebview;  // 主页面

@end

@implementation DWViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.

    // 适配iOS6的状态栏
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        _myWebview.frame =  CGRectMake(0,20,self.view.frame.size.width,self.view.frame.size.height-20);
    }

    // 加载制定的URL
    NSURL *url =[NSURL URLWithString:@"http://localhost"];
    NSURLRequest *request =[NSURLRequest requestWithURL:url];
    [_myWebview setDelegate:self];
    [_myWebview loadRequest:request];

}

// 网页中的每一个请求都会被触发
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{

    // 每次跳转时候判断URL

    if([request.mainDocumentURL.relativePath isEqualToString:@"/getInfo/why"])
    {
        NSLog(@"why");
        return NO;
    }

    return YES;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

[iOS]在WebApp中如何使用JS调用iOS的函数

时间: 2024-10-11 22:56:19

[iOS]在WebApp中如何使用JS调用iOS的函数的相关文章

[iOS]通过JS调用iOS函数时的URL编码问题

在前面的文章:[iOS]在WebApp中如何使用JS调用iOS的函数 中,提到了如何使用JS通过修改URL调用iOS的内部函数. 其中会遇到一个问题,就是编码问题,比如通过URL调用弹窗,在里面写上内容:你好汪海. 那链接大概就是这样的:http://xxx.com#ios?action=alert&param=你好汪海 但是在iOS中接收到的时候会出现中文的乱码: http://xxx.com#ios?action=alert&param=%25E6%2596%2587%25E4 遇到这

Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)

Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. wap银联支付流程是这样:客户端---> 服务器(构建支付请求)--> 银联支付 ---> 返回到服务端(处理支付结果).所以对于手机网站银联支付没有问题,但是对于ios端app和android端app, 再通过wap支付,发现支付成功后,很难在回到app客户端了. 所以这里就必须借助Pho

JS调用C#后台函数获得后台参数(html获得C#参数)

    C#有自己的后台控件,跟后台交互很简单和方便,但有的时候不得不用html控件,要如何与后台交互是个问题.例如html获得后台参数后传到PHP进行数据库操作.下面简单介绍JS调用后台函数获得要传到前台的参数 C#后台代码(Default.aspx.cs): 1 public string getParameter() 2 { 3 string parameter = "这是要传到前台的参数"; 4 return parameter; 5 } Default.aspx部分代码: 注

UIWebView中Html中用JS调用OC方法及OC执行JS代码

1.HTML页面 1 <html> 2 3 <head> 4 5 <title>HTML中用JS调用OC方法</title> 6 7 <meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> 8 9 <script> 10 11 function test() 12 13 { 14 15 alert("test

ios开发:如何用js调用ios

本文转载至 :http://blog.chinaunix.net/uid-29415710-id-4058564.html - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSURL * url = [request URL]; if ([[url sche

JS调用Android、Ios原生控件

在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时,提高代码质量,实现两者在网页端代码的统一. 首先我们先看一下Ios调用JS的方法实现: //无参调用 function SwiftCallJs1(){} //有参调用 function SwiftCallJs2(name, message){} 紧接着我们看一下Android调用JS的方法实现: /

js 与 ios Android交互

一.android 交互 1.js调用webview 在android API Level 17及以上的版本中,就会出现js调用不了android的代码,这是版本兼容的问题,需要在调用的方法上面加一个注解:@JavascriptInterface,这个注解需要导入一个包:import android.webkit.JavascriptInterface; public void onCreate(Bundle savedInstanceState) { //给js设置调用的方法 this.app

JsBrage -- App中WebView与JS的交互桥梁

在Hybrid App中网页都是显示在原生的WebView中,js与原生通信都是靠WebView提供的支持方式来实现的,而将这个实现方式抽象封装出来的模块,就是JsBrage. Android: 对于Android调用JS代码的方法有2种: 1. 通过WebView的loadUrl(),目前项目中用的这种方式 mWebView.loadUrl("file:///android_asset/javascript.html"); mWebView.loadUrl("javascr

使用Ajax在javascript中调用后台C#函数

最近一段时间在紧跟一个网站的项目,数据库中用户表的UserName要求是唯一的,所以当用户选定一个用户名进行注册时要首先检查该用户名是否已被占用,并给出提示.起初的实现是:用户填写完注册表单提交后,在后台进行验证.但看到很多网站的设计是当用户填写完用户名,TextBox失去焦点后就会立即给出提示,比如https://passport.csdn.net/account/register,反应很迅速,应该是在前台进行检查的.今天花了些时间针对这一点查了一些资料. js调用后台C#函数检测用户名时需要