一 加载外部网页

1、使用UIWebView加载网页
　　运行XCode  新建一个Single View Application 。

2 添加安全消息

　　添加以下消息到项目的  Info.plist

<key>NSAppTransportSecurity</key>

<dict>

<key>NSAllowsArbitraryLoads</key><true/>

</dict>

2、加载WebView
　　在ViewController.m添加WebView成员变量和添加实现

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    NSURL * url = [ NSURL URLWithString:@"http://www.baidu.com" ] ;

  NSURLRequest *request = [NSURLRequest requestWithURL:url ];

    [self.webView loadRequest:request];

}

@end

二 加载内部资源

　　1 新建一个IOS的应用。加载一个web资源到本地应用。

2 加载的网络页面

index.html

<html>

   <head>

      <meta charset="UTF-8">

   </head>

   <body>

      <p id="word"></p>

      <ul>

          <li class="change">你好</li>

          <li>test1</li>

          <li>test2</li>

          <li>test3</li>

          <li>test4</li>

          <li>test5</li>

      </ul>

   </body>

</html>

3 在ViewController.m添加请求本地资源的代码

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];

    NSURLRequest *request = [NSURLRequest requestWithURL:url ];

    [self.webView loadRequest:request];

}

@end

4 设置代理

选中工程里的 Main.storyboard在找到Web View 视图，按住 commond键，指向ViewController在弹出的菜单里选中'delegate',勾选中后，在控制器中点击鼠标右键查看 WebView的delegate设置成功。

5 让 ViewController.m实现 UIWebViewDelegate 代理，重写webViewDidFinishLoad方法


#import "ViewController.h"

@interface ViewController ()<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    //NSURL * url = [ NSURL URLWithString:@"http://www.baidu.com" ] ;
     NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    
    NSURLRequest *request = [NSURLRequest requestWithURL:url ];
    
    [self.webView loadRequest:request];
    
}

- (void) webViewDidFinishLoad:(UIWebView *)webView{
    // 删除
    NSString *str = @"var p = document.getElementsByTagName('p')[0];";
    NSString *str1 = @"p.remove();";
    
    [webView stringByEvaluatingJavaScriptFromString:str];
    [webView stringByEvaluatingJavaScriptFromString:str1];
    
    // 添加
    NSString *str2 = @"var p = document.createElement('p');"
    "p.innerHTML = 'It is a good day';"
    "p.style.background = 'red';"
    "document.body.appendChild(p);";
    [webView stringByEvaluatingJavaScriptFromString:str2];
    
    // 修改
    NSString *str3 = @"var li = document.getElementsByTagName('li')[0]; li.innerHTML='test6';";
    [webView stringByEvaluatingJavaScriptFromString:str3];
    
    
    NSString * str4 = @"var img = document.createElement('img');"
                    "img.src='img_01.jpg';"
                    "document.body.appendChild(img);";
     [webView stringByEvaluatingJavaScriptFromString:str4];

    
}

@end

最终效果如下图所示：

　　练习访问 http://wap.baidu.com页面，修改页面的内容：

　　关键代码：

- (void)viewDidLoad {

    [super viewDidLoad];

    NSURL * url = [ NSURL URLWithString:@"http://www.baidu.com" ] ;

    NSURLRequest *request = [NSURLRequest requestWithURL:url ];

    [self.webView loadRequest:request];

}

- (void) webViewDidFinishLoad:(UIWebView *)webView{

    NSString *str = @"var ele = document.getElementsByClassName('text-content')[0];"

                    "ele.innerText = '12345678';";

　　[webView stringByEvaluatingJavaScriptFromString:str];

}

知识点：

　　1. 在mac app中，点击 input标签时，如果不能弹出键盘需要按住以下快捷键。

commond + shift + K

　　2. 苹果键盘与Windows键盘完整对应

Windows  Ctrl   ---  Mac Control

Windows  Win --- Mac Option

Windows Alt --- Mac Commond

HTML5学习总结-11 IOS 控件WebView显示网页的更多相关文章

  1. HTML5学习总结-10 Android 控件WebView显示网页

    WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient 1)setWebClient: ...

  2. Android：控件WebView显示网页

    WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient setWebClient:主要 ...

  3. Android：控件WebView显示网页 -摘自网络

    WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient setWebClient:主要 ...

  4. 安卓，网页控件，显示网页 Android, web controls, display web pages

    安卓,网页控件,显示网页Android, web controls, display web pages 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq ...

  5. UIKit控件直接显示网页文字内容

    NSString *html = @"<bold>Hello</bold> Now<br> <em>iOS</em> can cr ...

  6. ios学习笔记图片+图片解释（c语言 oc语言 ios控件 ios小项目 ios小功能 swift都有而且笔记完整喔）

    下面是目录其中ios文件夹包括了大部分ios控件的介绍和演示,swift的时完整版,可以学习完swift(这个看的是swift刚出来一周的视频截图,可能有点赶,但是完整),c语言和oc语言的也可以完整 ...

  7. 设计一个 iOS 控件

    转载自:http://blog.csdn.net/zhangao0086/article/details/45622875 代码的等级:可编译.可运行.可测试.可读.可维护.可复用 前言 一个控件从外 ...

  8. iOS控件之UIResponder类

    iOS控件之UIResponder类 在iOS中UIResponder类是专门用来响应用户的操作处理各种事件的,我们知道UIApplication.UIView.UIViewController这几个 ...

  9. 控件WebView网页的加载

    Android:控件WebView网页的加载 WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWe ...

随机推荐

  1. 如何拿到半数面试公司Offer——我的Python求职之路

    从八月底开始找工作,短短的一星期多一些,面试了9家公司,拿到5份Offer,可能是因为我所面试的公司都是些创业性的公司吧,不过还是感触良多,因为学习Python的时间还很短,没想到还算比较容易的找到了 ...

  2. Google搜索的几个使用技巧——让你的搜索结果更准确

    对于软件开发人员来说,不知道的内容在网上搜索是再正常不过的了.今天同事在组内分享了几个谷歌搜索的使用技巧,在此自己总结一下,希望可以帮到更多人. 在此之前先要唠叨几句,什么时候用百度,什么时候用谷歌? ...

  3. MC700 安装双系统

    2011年买的MBP MC700给老婆用了一段时间后,老婆还不习惯不了Mac OS或是虚拟机,要求必须给安装windows,无奈时隔四年后,只能重新尝试在MC700上用bootcamp安装Window ...

  4. poj 1698 Alice‘s Chance

    poj 1698  Alice's Chance 题目地址: http://poj.org/problem?id=1698 题意: 演员Alice ,面对n场电影,每场电影拍摄持续w周,每周特定几天拍 ...

  5. Win7激活工具|OEM小马激活

    OEM小马激活,Win7激活. 免费下载:http://yunpan.cn/cmZ5DyDvXG2In  访问密码 7fcf

  6. python学习笔记整理——元组tuple

    Python 文档学习笔记2 数据结构--元组和序列 元组 元组在输出时总是有括号的 元组输入时可能没有括号 元组是不可变的 通过分拆(参阅本节后面的内容)或索引访问(如果是namedtuples,甚 ...

  7. [cross domain] four approachs to cross domain in javascript

    four approachs can cross domain in javascript 1.jsonp 2.document.domain(only in frame and they have ...

  8. Learning jQuery, 4th Edition 勘误表

    来源于:http://book.learningjquery.com/3145/errata/ Chapter 1 page 14 The CSS snippet is correct, but it ...

  9. ES6新特性：Function函数扩展， 扩展到看不懂

    本文所有Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 函数的默认值: 如果有参数 ,那就用参数, 如果没有参数, 那就用默认的参数: aj ...

  10. 概率 light oj 1248

    t组样例 n<100010 dp[i]  从i翻到n面的期望 接下来翻 可能是i面已经有的 也可能是n-i面没有的 dp[i]=i/n*(dp[i]+1)+(n-i)/n*(dp[i+1]+1) ...