Hybrid--WebView中使用Ajax
Hybrid框架下的app,使用的Ajax。须要注意的是UIWebViewDelegate不会监測到Ajax的request。也就是再运行Ajax代码时。shouldStartLoadWithReuqest等方法并不会被调用。
其解决方法须要Javascript和navtive code一起来做,其基本原理可參考这片文章,其流程是在
Javascript handler中每创建Ajax的请求时。须要将这段js存在ajax_handler.js放在app中
var s_ajaxListener = new Object();
s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;
s_ajaxListener.callback = function () {
window.location='mpAjaxHandler://' + this.url;
}; XMLHttpRequest.prototype.open = function(a,b) {
if (!a) var a='';
if (!b) var b='';
s_ajaxListener.tempOpen.apply(this, arguments);
s_ajaxListener.method = a;
s_ajaxListener.url = b;
if (a.toLowerCase() == 'get') {
s_ajaxListener.data = b.split('?');
s_ajaxListener.data = s_ajaxListener.data[1];
}
} XMLHttpRequest.prototype.send = function(a,b) {
if (!a) var a='';
if (!b) var b='';
s_ajaxListener.tempSend.apply(this, arguments);
if(s_ajaxListener.method.toLowerCase() == 'post')s_ajaxListener.data = a;
s_ajaxListener.callback();
}
当中的"mpAjaxHandler"为自己定义的Scheme,用于差别request是否是由Ajax发出的。
在App端
获得js
static NSString *JSHandler; + (void)initialize {
JSHandler = [[NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"ajax_handler" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil] retain];
}
加载页面后,运行这段js
- (void)webViewDidStartLoad:(UIWebView *)webView {
[webView stringByEvaluatingJavaScriptFromString:JSHandler];
}
拦截住Request,不让webview的URL做出改变
#define CocoaJSHandler @"mpAjaxHandler" - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if ([[[request URL] scheme] isEqual:CocoaJSHandler]) {
NSString *requestedURLString = [[[request URL] absoluteString] substringFromIndex:[CocoaJSHandler length] + 3]; NSLog(@"ajax request: %@", requestedURLString);
return NO;
} return YES;
}
Ajax相关知识
Ajax作为异步Javascript广泛应用在web站点上。
以下是一个来自于w3school的简单使用Ajax的样例:
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","http://www.w3school.com.cn/example/xmle/books.xml",true);
xmlhttp.send();
}
</script>
</head> <body> <h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">GET Book List</button> </body>
</html>
点击button。通过Ajax的方式获得书单。部分内容參考于stackoverflow
Hybrid--WebView中使用Ajax的更多相关文章
- 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图
[源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...
- 在WebView中如何让JS与Java安全地互相调用
在现在安卓应用原生开发中,为了追求开发的效率以及移植的便利性,使用WebView作为业务内容展示与交互的主要载体是个不错的折中方案.那么在这种Hybrid(混合式) App中,难免就会遇到页面JS需要 ...
- 重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图
原文:重新想象 Windows 8.1 Store Apps (81) - 控件增强: 加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 Web ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- WebView中JS调用Android Method 遇到的坑整理
WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...
- Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Nativ ...
- Jquery中的Ajax
AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 混合开发 webview 中file 控件 点击后无反应解决方法
最近在做个项目 ,需要 使用 file 控件上传 图片到服务器 ,在手机浏览器中 可以正常选择照片,但是放到 android 应用中的webview中,file 控件点击后就没有反应. 百度了一番后, ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
随机推荐
- 让旧浏览器支持HTML5新增标签
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. ...
- 【POJ3498】March of the Penguins(最大流,裂点)
题意:在靠近南极的某处,一些企鹅站在许多漂浮的冰块上.由于企鹅是群居动物,所以它们想要聚集到一起,在同一个冰块上.企鹅们不想把自己的身体弄湿,所以它们在冰块之间跳跃,但是它们的跳跃距离,有一个上限. ...
- js-(19,999,999.00)
function price(n, precision) { let s = String(n), int = parseInt(n).toString(), pre = s.split('.')[1 ...
- 小程序 之登录 wx.login()
小程序的登录关键在于使用wx.login()方法后,要到取到code值传到后台, 再用小程序平台本帐号生成的appid+addsecret+code去微信接口服务取得用户唯一标识后即可登录[注意:此步 ...
- git上传(本地和远程有冲突时)
一. 冲突的产生:在上次git同步(上传)之后,本地和远程均有更改 二. 处理 1. 丢弃本地,采用远程: git checkout 冲突文件及其路径 如: git checkout bzrobot_ ...
- mysql function
mysql 自定义函数的使用 先查看函数功能是否开启:show variables like '%func%'; 若是未开启则:SET GLOBAL log_bin_trust_function_cr ...
- 小W摆石子
可以确定, 最后围成是 一个长方形 + 多出一列 的形状. 而且多出的那一列应该是和较短的边相邻. 贴代码. #include<iostream> #include<algorith ...
- 327. Count of Range Sum
/* * 327. Count of Range Sum * 2016-7-8 by Mingyang */ public int countRangeSum(int[] nums, int lowe ...
- 自签名证书安全性问题研究https(ssl)
先看下https(ssl)的好处,以及为什么要用: http://imweb.io/topic/565c71673ad940357eb99879 https://zh.wikipedia.org/wi ...
- sublime的tab和spaces空格切换的坑
python是严格要求对齐或者叫缩进的: 使用sublime对python进行编程时,可以使用tab或者空格,但是不能混用.特别是从外面把代码拷贝进sublime的时候,更要注意是否一致. 简单介绍一 ...