一 加载外部网页

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. .NET CLR 运行原理

    原文: Drill Into .NET Framework Internals to See How the CLR Creates Runtime Objects 文章讨论了: SystemDoma ...

  2. MATLAB axis和axes的区别

    axis中文为“轴”之意,在matlab中用于控制坐标轴的范围和样式(颜色等). axis([XMIN XMAX YMIN YMAX]) 设置当前所绘图像的x轴和y轴的范围.axis([XMIN XM ...

  3. Matlab中的向量

    1.             向量的创建 1)直接输入: 行向量:a=[1,2,3,4,5] 列向量:a=[1;2;3;4;5] 2)用“:”生成向量 a=J:K 生成的行向量是a=[J,J+1,…, ...

  4. Spearman Rank(斯皮尔曼等级)相关系数及MATLAB实现

    转自:http://blog.csdn.net/wsywl/article/details/5859751 Spearman Rank(斯皮尔曼等级)相关系数 1.简介 在统计学中,斯皮尔曼等级相关系 ...

  5. Android回调

    当A页面跳往B页面做一些操作后,再从B页面回到A页面时,A页面想要回去一些B页面操作的数据时,我们一般会使用回调. 1 public class MainActivity extends Activi ...

  6. springMvc全局异常处理

    本文中只测试了:实现Spring的异常处理接口HandlerExceptionResolver 自定义自己的异常处理器 对已有代码没有入侵性等优点,同时,在异常处理时能获取导致出现异常的对象,有利于提 ...

  7. 直播CDN架构随想

    互联网内容载体变迁历程,文字--图片/声音--视频--VR/AR----从直播1.0秀场时代(YY).2.0游戏直播(斗鱼.虎牙.熊猫)到如今全民直播3.0泛生活娱乐时代(映客.花椒),国外直播App ...

  8. SVN的简单使用

    鼠标右键 SVNCheckout 导出文件 如果想在文件里做修改:右击鼠标-SVN Commit 如果想添加文件:把想要添加的文件粘贴到文件夹中,鼠标右击-TortoiseSVN-add 如果想在添加 ...

  9. chrome 26.0.XXX版本下media query流媒体查询有问题的bug

    这段代码什么意思: @media only screen and (max-width: 1360px)  当用户的界面小于等于1360px的时候, 会加载该流媒体样式(此时的界面是包含滚动条的): ...

  10. java-汉字转化拼音(纯java)

    1.转换所有的拼音 import java.util.Iterator; import java.util.LinkedHashMap; import java.util.Set; public cl ...