UIWebview加载jS做搜索

来源：互联网发布：淘宝运费险骗保编辑：程序博客网时间：2024/06/05 13:01

打开一些支持搜索的，且是采用Webview做界面的 ios APP，其中的搜索代码多非常类似，这个倒成了原来web里面ASP代码无处可藏的模式一样了：

多了解一些webkit的属性，有好处

http://ued.ctrip.com/blog/wp-content/webkitcss/prop/text-size-adjust.html

涉及到一下几个关键问题：

1. 对CSS/HTML有一定的了解，使用UIwebView 作为浏览器，文件内容作为web的富文本，已经被处理过了。通俗一点就是你打开网页的<htm><body>里面的内容，也许image图片，就被放到了<image>,这个就要靠uiwebview自己的理解能力了

2.对如何使用cSS/JS有一定了解：

简单例子是我们使用uiwebview打开一个html，通过css/js来调整网页的显示，最好是能够互动，

Here's a code that loads a html string which uses a css file. You can load the entire css from a file, or modify it as you need.

===

// HTML files are stored in the main bundle  NSBundle *bundle = [NSBundle mainBundle];   NSString *path = [bundle bundlePath];  NSString *filename = @"none";  NSString *fullPath = [NSBundle pathForResource:filename ofType:@"html" inDirectory:path];   // load a HTML from a file  NSString *chapter_filename = [NSString stringWithFormat:@"Section%d", _chapter];              NSString *sectionHTMLPath = [[NSBundle mainBundle] pathForResource:chapter_filename ofType:@"html"];//正真来读html文件
//NSUTF8StringEncoding，和文本编码有关，建议utf8/unicode
NSString* htmlContent = [NSString stringWithContentsOfFile:sectionHTMLPath encoding:NSUTF8StringEncoding error:nil];  // add a generic template and the css file directive  NSString* htmlString = @"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"he\" lang=\"he\"><head>

<style type=\"text/css\" media=\"all\">@import \"styles.css\";</style><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /></head><body>%@</body></html>";//注意这里的语法，一定使用@import  // load the html into a web view   NSURL *url = [NSURL fileURLWithPath:fullPath];  [_webView loadHTMLString:[NSString stringWithFormat:htmlString, htmlContent] baseURL:url];

//注意到html的内容，被搁置在<body></body>中。

我只能猜测下面的代码是用于excel sheet的：

function RDSetXLSTabsVisibility (isVisible){var i = 0;while (true){var tab = document.getElementById('Tab'+i);if (tab)tab.style.visibility = isVisible?'visible':'hidden';elsebreak;i++;}}

3. 怎么调用JS，这个最简单stringbyevalutingJsFromstring:函数名称

 // In your Javascript files:    function myJavascriptFunction () {          // Do whatever your want!        }  // -----------------------------------    // And in your Objective-C code:  // Call Javascript function from Objective-C:    [webview stringByEvaluatingJavaScriptFromString:@"myJavascriptFunction()"];
4. 如果从js中调用ios代码有点难度，建议阅读下文的 bestsample章节 http://blog.techno-barje.fr/post/2010/10/06/UIWebView-secrets-part3-How-to-properly-call-ObjectiveC-from-Javascript/

Here is another sample application, with exactly the same structures and test file.
But this time you are going to see innerHTML and setTimeout working! Again, this demo contains a library (NativeBridge.js) that allow to send arguments to native code and get back a result in javascript asynchronously, with a callback function.

至于历史久远，是否可行，自己去验证：

自己生成的html，有时无法避免要使用local css, js or image （当然你也可以使用url来链接到网上的css/js/image）。
假设在你的ios app里的resource folder里已经存放了a webpage.css and a test.js，那么你生成的html string应该这样include them
    NSString* htmlHeader=@"<html><head><style type='text/css'>@import url('webpage.css');</style><script type='text/javascript' charset='utf-8' src='test.js'></script></head><body>";
    NSString* htmlBody=@"<p> <img alt=\"dept\"  src=\"https://www6.cityu.edu.hk/sa/images/30May12.jpg\"  /></p>";
    NSString* htmlFooter=@"</body></html>";
    NSString* strHtml=[[NSString alloc] initWithFormat:@"%@%@%@",htmlHeader,htmlBody,htmlFooter];
            
    [webView loadHTMLString:strHtml baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle]resourcePath] isDirectory: YES]];

注意：
1. baseURL就是你的resource folder path
2. 如果把<script type='text/javascript' charset='utf-8' src='test.js'></script>改成<script type='text/javascript' charset='utf-8' src='test.js' />则无法load js （ref link: http://stackoverflow.com/questions/7840127/uiwebview-loadhtmlstring-not-working-in-ios5）
3. 设置编译选项把JS编译剔除