<p>1. 先了解一下html+css+js(JavaScript)的知识(一个iOS的个人理解) </p>
- html 是一个网页的内容
- css 给网页添加样式
- js 动态的修改网页,赋予网页生命力,也是前端的核心竞争力,在js中我们对html的标签成为结点,我们可以在js中对这些结点进行crud(增删改查)操作,并且可以修改结点的css样式
<p> 2.我们需要对html中标签添加外联css样式(嵌入、内联、外联三种样式表)的时候我们需要拿到标签,我们可以通过给html的自定义属性(class, id ,name)拿到标签,然后通过选择器拿到标签然后添加样式</p>
name ：指定标签的名称。
id ：指定标签的唯一标识。
class ：指定标签的类名。
<p>3.了解JS中的DOM操作</p>
- 写入一个结点
// 这是一种形式
document.write('<p class="add"> 添加进去的便签 </p>');
// 另外一中形式
var document1 = document.createElement('div'); // 创建一个div标签
var document5 = document.getElementsByTagName('body')[0]; // 获取一个标签
document5.appendChild(document1); // 把这个标签放在body标签上面
- 获取一个节点
// 获取标签的四种方式
var document2 = document.getElementsByName('1'); // 根据name获取一组标签
var document3 = document.getElementsByClassName('header')[0]; //根据class获取一组标签
var document4 = document.getElementById('content'); //根据ID获取到一个标签
var document5 = document.getElementsByTagName('div'); // 根据标签获取一组标签
- 更新一个结点中的样式
var inputdocument = document.createElement('input'); // 初始化input标签,
inputdocument.style = 'text'; 类似UITextField的样子
inputdocument.value = '这是什么鬼'; //初始化textField中的值
bodyDocument.appendChild(inputdocument); //添加到body这个结点中
// 当用户改变输入字段的内容的时候,常结合对输入字段的验证来使用
inputdocument.onchange = function() {
this.value = '文字发生了改变';
};
// 输入框获得焦点会执行的函数
inputdocument.onfocus = function() {
console.log(this.value); //打印
}
// 失去焦点会执行的函数
inputdocument.onblur = function() {
console.log('失去焦点');
}
// 文本被选中执行的函数
onclick = function() {
console.log('文本被选中');
}
-
删除一个结点
//先通过id 或者class 等方式获取到结点(上面有) //然后执行下面的操作,这个结点的父节点,删除这个结点 inputdocument.parentNode.removeChild(inputdocument);
<p> 4. 在OC中加载html的文件 </p>
UIWebView *web = [[UIWebView alloc] initWithFrame:self.view.frame];//初始化webview
web.delegate = self; //设置代理
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://db.dota2.uuu9.com"]];
[web loadRequest:request]; //加载数据
web.scalesPageToFit = YES; // YES 网页适配手机 NO 正常的浏览器大小
[self.view addSubview:web]; // 加载到父视图
// 主要通过这个函数执行js交互stringByEvaluatingJavaScriptFromString
<p> 5. UIWebView的代理</p>
//可以获取它加载的网页上面的事件，比如单击了图片，单击了按钮等等
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
if ([[request URL].absoluteString isEqual:@"http://dota2.uuu9.com/"]) {
NSLog(@"点击了首页");
//
return NO;
}
return YES;
}
// 开始加载
- (void)webViewDidStartLoad:(UIWebView *)webView {
}
// 结束加载(我们一般在这个里面出)
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// 禁用用户选择
//[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
//
// // 禁用长按弹出框
// [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
//
// // 取消链接
// [webView stringByEvaluatingJavaScriptFromString:@"$(document).ready(function () {$(\"a\").removeAttr(\"href\");})"];
//
// // 调整字体大小 body '100%' 可做更改
// [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '100%'"];
//
// // 计算html的高度 可以根据获取到的高度动态设置父视图的高度
// NSString *fitHeight = [webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight;"];
//
// NSLog(@"=====%@", fitHeight);
//获取所有源代码
NSString *JsToGetHTMLSource = @"document.getElementsByTagName('html')[0].innerHTML";
NSString *HTMLSource = [webView stringByEvaluatingJavaScriptFromString:JsToGetHTMLSource];
NSLog(@"%@",HTMLSource);
// //获取页面的代码body的内容
// NSString *JsToGetHTMLSource = @"document.body.innerHTML";
// NSString *pageSource = [webView stringByEvaluatingJavaScriptFromString:JsToGetHTMLSource];
// NSLog(@"pagesource:%@", pageSource);
//根据标签更改显示内容
//getElementsByTagName() 方法可返回带有指定标签名的对象的集合
//innerHTML='显示的内容'
// NSString *tempString = [NSString stringWithFormat:@"document.getElementsByTagName('h1')[0].innerHTML ='===================';"];
// [webView stringByEvaluatingJavaScriptFromString:tempString];
// //替换第id为idtest的DIV元素内容
// NSString *tempString2 = [NSString stringWithFormat:@"document.getElementById('comment_more').innerHTML =' ';"];
// [webView stringByEvaluatingJavaScriptFromString:tempString2];
// //修改标签字体
// NSString *tempString2 = [NSString stringWithFormat:@"document.getElementsByTagName('p')[0].style.fontSize='%@';",@"100px"];
// [webView stringByEvaluatingJavaScriptFromString:tempString2];
// 修改图片大小
// [webView stringByEvaluatingJavaScriptFromString:
// @"var script = document.createElement('script');"
// "script.type = 'text/javascript';"
// "script.text = \"function ResizeImages() { "
// "var myimg,oldwidth;"
// "var maxwidth = 280;" //缩放系数
// "for(i=0;i < document.images.length;i++){"
// "myimg = document.images[i];"
// "if(myimg.width > maxwidth){"
// "oldwidth = myimg.width;"
// "myimg.width = maxwidth;"
// "myimg.height = myimg.height * (maxwidth/oldwidth) + 90;"
// "}"
// "}"
// "}\";"
// "document.getElementsByTagName('head')[0].appendChild(script);"];
//
// [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}
// 加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
}