第四节：跨域请求的解决方案和WebApi特有的处理方式

一. 简介

前言： 跨域问题发生在Javascript发起Ajax调用，其根本原因是因为浏览器对于这种请求，所给予的权限是较低的，通常只允许调用本域中的资源， 除非目标服务器明确地告知它允许跨域调用。假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。 一般情况下，如果我们直接使用 Ajax 来请求将会失败，浏览器也会返回“源不匹配”的错误，"跨域"也就以此由来。 

　　本节将结合MVC和WebApi两套框架介绍通用的跨域请求的解决方案、WebApi特有的解决方案、几种JSONP模式、以及如何让WebApi也支持JSONP的改造方案。

　　下面列举几种跨域的情况：

 

二.  Mvc和WebApi通用的模式

　　该模式是MVC和WebApi通用的一种处理模式，简单便捷，不需要额外添加多余的程序集，只需要在WebConfig中进行配置一下即可。

　　同时缺点也比较明显，那就是只能全局配置，配置完后，所有的控制器下的方法都支持跨域了。

1. 代码配置如下，在 <system.webServer></system.webServer>节点的 最顶 添加如下代码：

PS：分析下面代码

　　A. Access-Control-Allow-Origin ：代表请求地址，如：" http://localhost:2131, http://localhost:2133" 多个地址之间用逗号隔开，*  代表运行所有

　　B. Access-Control-Allow-headers： 代表表头

　　C. Access-Control-Allow-method: 代表请求方法。如："GET,PUT,POST,DELETE"

复制代码

  <system.webServer><!--允许跨域请求的配置  WebApi和MVC通用--><httpProtocol><customHeaders><add name="Access-Control-Allow-Origin" value="*" /><add name="Access-Control-Allow-Headers" value="Access-Control-Allow-Origin, AppKey, Authorization" /><add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" /><add name="Access-Control-Request-Methods" value="GET, POST, OPTIONS" /></customHeaders></httpProtocol><!--允许跨域请求的配置  WebApi和MVC通用   至此结束--><modules><remove name="TelemetryCorrelationHttpModule" /><add name="TelemetryCorrelationHttpModule" type="Microsoft.AspNet.TelemetryCorrelation.TelemetryCorrelationHttpModule, Microsoft.AspNet.TelemetryCorrelation" preCondition="integratedMode,managedHandler" /><remove name="ApplicationInsightsWebTracking" /><add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" /></modules><validation validateIntegratedModeConfiguration="false" /><handlers><remove name="ExtensionlessUrlHandler-Integrated-4.0" /><remove name="OPTIONSVerbHandler" /><remove name="TRACEVerbHandler" /><add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /></handlers></system.webServer>

复制代码

2.  分别在MVC和WebApi下的FifthController和CorsController中新建GetUserName方法，代码如下：

复制代码

 1         /// <summary>2         /// 方案一的测试接口3         /// http://localhost:2131/api/Fifth/GetUserName?userName=admin4         /// </summary>5         /// <param name="userName"></param>6         /// <returns></returns>7         [HttpGet]8         public string GetUserName(string userName)9         {
10             return $"WebApi：userName的值为{userName}";
11         }    
12         /// <summary>
13         /// 方案一的测试接口
14         /// http://localhost:1912/CorsTest/GetUserName
15         /// </summary>
16         /// <param name="userName"></param>
17         /// <returns></returns>
18         [HttpGet]
19         public string GetUserName(string userName)
20         {
21             return $"MVC：userName的值为{userName}";
22         }

复制代码

3. 在一个新项目中进行跨域调用：

复制代码

1   //1. WebApi
2  $.get("http://localhost:2131/api/Fifth/GetUserName", { userName: "admin" }, function (data) {
3      console.log(data);
4  });
5  //2. MVC
6   $.get("http://localhost:1912/CorsTest/GetUserName", { userName: "admin" }, function (data) {
7      console.log(data);
8  });

复制代码

注释掉webconfig中的代码配置结果如下：

配置后的结果如下：

 

三. WebApi特有的处理方式

　　该模式和上述通用的模式相比较， 最大的好处就是比较灵活，既可以作用于全局，也可以特性的形式作用于Controller，或者直接作用于Action。

　　该方案的前提：先通过Nuget添加【Microsoft.AspNet.WebApi.Cors】程序集。

　　核心方法：EnableCorsAttribute(string origins, string headers, string methods)

　　* 代表允许所有。

　　A.origins代表请求地址：" http://localhost:2131, http://localhost:2133" 多个地址之间用逗号隔开

　　B.headers代表表头：

　　C.method代表请求方法："GET,PUT,POST,DELETE"

1. 作用于全局

　　在WebApiConfig类中的Register方法中添加：config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

2. 作用于Controller

　　(1). 在WebApiConfig类中的Register方法中添加：config.EnableCors();

　　(2). 在FifthController控制器上添加特性：[EnableCors("*", "*", "*")]

3. 作用于Action

　　(1). 在WebApiConfig类中的Register方法中添加：config.EnableCors();

　　(2). 在GetUserName2方法上添加特性：[EnableCors("*", "*", "*")]

部分代码如下图：

代码测试：分别进行上面1,2,3的代码配置，测试三次，结果如下，均实现了跨域。

1   $.get("http://localhost:2131/api/Fifth/GetUserName2", { userName: "admin" }, function (data) {
2      console.log(data);
3   });

结果：

 

 

四. MVC下JSONP的几种写法

 1. JSON和JSONP的区别

① json格式：
 {
　　"id":123,
　　"name":"ypf"
 }
② jsonp格式：在json外面包了一层
callback({
　　"id":123,
　　"name":"ypf"
 })
其中callback取决于url传到后台是什么,他就叫什么

2. 利用Jquery实现JSONP

注意前端的两个参数： dataType: "jsonp", jsonp: "myCallBack", 其中myCallBack需要和服务端回掉方法中的参数名相对应，注释掉这句话默认传的名称叫callback

后台要有一个参数来接受这个包裹的名称，然后用它把最后的返回值包裹起来以string的形式返回给客户端，注：数据要进行序列化。

这种方式有个明显缺点：假设有一天这个接口不需要跨域，要改会普通请求的普通返回形式, 则需要改代码，就哭了，而且每个接口都要这么对应去写跨域的写法，侵入性太强。

服务器端代码分享：

复制代码

 1        /// <summary>2         /// 方案三：MVC默认支持JSONP3         /// 但需要服务器端有类似callback参数接受的，然后对返回值进行拼接4         /// </summary>5         /// <param name="callBack"></param>6         /// <param name="userName"></param>7         /// <returns></returns>8         [HttpGet]9         public dynamic GetInfor(string myCallBack, string userName)
10         {
11             var data = new
12             {
13                 id = userName + "001",
14                 userName = userName
15             };
16             JavaScriptSerializer js = new JavaScriptSerializer();
17             string xjs = js.Serialize(data);
18             return Content($"{myCallBack}({xjs})");
19 
20             //或者直接返回字符串
21             //return $"{myCallBack}({xjs})";
22         }

复制代码

JS调用代码分享：

复制代码

 1  　　　　　　　　$.ajax({2                     url: 'http://localhost:1912/CorsTest/GetInfor',3                     type: "get",4                     dataType: "jsonp",5                     //需要和服务端回掉方法中的参数名相对应6                     //注释掉这句话默认传的名称叫callback7                     jsonp: "myCallBack",   8                     cache: false,9                     data: { userName: "ypf" },
10                     success: function (data) {
11                         console.log(data);
12                         console.log(data.id);
13                         console.log(data.userName);
14                     }
15                 });

复制代码

结果：

3. 思考：MVC下能否也面向切面的形式实现跨域？

效果：①方法依然常规写法不需要特意的用跨域的写法 ②哪个方法想支持跨域，哪个方法不想支持能灵活的控制，不要去改方法内部的代码。③跨域调用和非跨域调用都能调用

思路1：利用过滤器以特性的形式进行作用，同时过滤器内实现方案一中的代码，详见MvcCors过滤器和GetInfor2方法

过滤器代码

复制代码

 1  public class MvcCors:ActionFilterAttribute2     {3         /// <summary>4         /// 方法执行后执行5         /// </summary>6         /// <param name="filterContext"></param>7         public override void OnActionExecuted(ActionExecutedContext filterContext)8         {9             HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Origin", "*");
10             HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Headers", "x-requested-with,content-type,requesttype,Token");
11             HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Methods", "POST,GET");
12         }
13     }

复制代码

GetInfor2方法

复制代码

 1       /// <summary>2         /// 方案三：自己利用方案一中的原理进行改造3         /// 让方法灵活的支持跨域4         /// </summary>5         /// <param name="userName"></param>6         /// <returns></returns>7         [MvcCors]8         [HttpGet]9         public string GetInfor2(string userName)
10         {
11             return $"MVC：userName的值为{userName}";
12         }

复制代码

JS代码

1   $.get("http://localhost:1912/CorsTest/GetInfor2", { userName: "admin" }, function (data) {
2      console.log(data);
3   });

调用结果

 

思路2：利用过滤器以特性的形式进行作用，同时过滤器中进行判断该调用是否属于跨域，属于的话就对返回值进行跨域的包裹返回，不属于的话，原样返回。(MVC版暂未实现，WebApi版详见下面)

继续思考：重写ContentResult，在重写里面判断，如果属于跨域请求，返回值进行跨域的返回，如果不是跨域请求，正常返回 (暂未实现)

 

五. WebApi下JSONP的改造

前言：WebApi默认不支持JSONP, 这里我们需要对其进行改造

测试不支持的代码

复制代码

 1  /// <summary>2         /// 原始的JSONP模式，返现不支持3         /// </summary>4         /// <param name="callBack"></param>5         /// <param name="userName"></param>6         /// <returns></returns>7         [HttpGet]8 9         public dynamic GetInfor(string myCallBack, string userName)
10         {
11             var data = new
12             {
13                 id = userName + "001",
14                 userName = userName
15             };
16             JavaScriptSerializer js = new JavaScriptSerializer();
17             string xjs = js.Serialize(data);
18 
19             return $"{myCallBack}({xjs})";
20         }

复制代码

复制代码

 1           $.ajax({2                     url: 'http://localhost:1912/CorsTest/GetInfor3',3                     type: "get",4                     dataType: "jsonp",5                     //需要和服务端回掉方法中的参数名相对应6                     //注释掉这句话默认传的名称叫callback7                     jsonp: "myCallBack",8                     cache: false,9                     data: { userName: "ypf" },
10                     success: function (data) {
11                         console.log(data);
12                         console.log(data.id);
13                         console.log(data.userName);
14                     }
15                 });

复制代码

改造一：

a. 通过Nuget安装程序集：WebApiContrib.Formatting.Jsonp.

b. 在Global文件中进行配置

//允许JSON的配置(注意前端传过来的名字必须要为myCallBack)

GlobalConfiguration.Configuration.AddJsonpFormatter(GlobalConfiguration.Configuration.Formatters.JsonForma‌​tter, "myCallBack");

服务器端代码：

复制代码

 1         /// <summary>2         /// 方案四：利用WebApiContrib.Formatting.Jsonp程序集改造支持跨域3         /// </summary>4         /// <param name="callBack"></param>5         /// <param name="userName"></param>6         /// <returns></returns>7         [HttpGet]8 9         public dynamic GetInfor2(string userName)
10         {
11             var data = new
12             {
13                 id = userName + "001",
14                 userName = userName
15             };
16             JavaScriptSerializer js = new JavaScriptSerializer();
17             string xjs = js.Serialize(data);
18             return $"{xjs}";
19         }

复制代码

前端JS代码：

复制代码

         $.ajax({url: 'http://localhost:2131/api/Fifth/GetInfor2',type: "get",dataType: "jsonp",//需要和服务端回掉方法中的参数名相对应//注释掉这句话默认传的名称叫callbackjsonp: "myCallBack",cache: false,data: { userName: "ypf" },success: function (data) {console.log(data);var jdata = JSON.parse(data);console.log(jdata.id);console.log(jdata.userName);}});

复制代码

测试结果： 

改造二：

　　利用上述MVC中的思路：利用过滤器以特性的形式进行作用，同时过滤器中进行判断该调用是否属于跨域，属于的话就对返回值进行跨域的包裹返回，不属于的话，原样返回。

过滤器代码：

复制代码

 1  public class JsonCallbackAttribute:ActionFilterAttribute2     {3         private const string CallbackQueryParameter = "myCallBack";4         public override void OnActionExecuted(HttpActionExecutedContext context)5         {6             var callback = string.Empty;7             if (IsJsonp(out callback))8             {9                 var jsonBuilder = new StringBuilder(callback);
10                 //将数据包裹jsonp的形式进行返回
11                 jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result);
12                 context.Response.Content = new StringContent(jsonBuilder.ToString());
13             }
14 
15             base.OnActionExecuted(context);
16         }
17 
18         private bool IsJsonp(out string callback)
19         {
20             callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];
21             return !string.IsNullOrEmpty(callback);
22         }
23     }

复制代码

服务端代码：

复制代码

 1         /// <summary>2         /// 方案四(改造二)：利用过滤器以特性的形式进行作用，同时过滤器中进行判断该调用是否属于跨域，3         /// 属于的话就对返回值进行跨域的包裹返回，不属于的话，原样返回。4         /// </summary>5         /// <param name="callBack"></param>6         /// <param name="userName"></param>7         /// <returns></returns>8         [HttpGet]9         [JsonCallback]
10 
11         public dynamic GetInfor3(string userName)
12         {
13             var data = new
14             {
15                 id = userName + "001",
16                 userName = userName
17             };
18             JavaScriptSerializer js = new JavaScriptSerializer();
19             string xjs = js.Serialize(data);
20             return $"{xjs}";
21         }

复制代码

js调用代码：

复制代码

 1           $.ajax({2                     url: 'http://localhost:2131/api/Fifth/GetInfor3',3                     type: "get",4                     dataType: "jsonp",5                     //需要和服务端回掉方法中的参数名相对应6                     //注释掉这句话默认传的名称叫callback7                     jsonp: "myCallBack",8                     cache: false,9                     data: { userName: "ypf" },
10                     success: function (data) {
11                         console.log(data);
12                         var jdata = JSON.parse(data);
13                         console.log(jdata.id);
14                         console.log(jdata.userName);
15                     }
16                 });

复制代码

结果返回：

 

六. 其它

　　webSocket 和signalr也是一种跨域方式，mvc下可以利用script标签实现跨域。 

分享MVC下利用Script标签实现跨域

服务器端代码

复制代码

 1         // <summary>2         /// 扩展：3         /// 利用script标签实现JSONP的跨域4         /// 但需要服务器端有类似callback参数接受的，然后对返回值进行拼接5         /// </summary>6         /// <param name="callBack"></param>7         /// <param name="userName"></param>8         /// <returns></returns>9         public ActionResult GetInfor4(string callBack, string userName)
10         {
11             var data = new
12             {
13                 id = userName + "001",
14                 userName = userName
15             };
16             JavaScriptSerializer js = new JavaScriptSerializer();
17             string xjs = js.Serialize(data);
18             return Content($"{callBack}({xjs})");
19 
20             //或者直接返回字符串
21             //return $"{callback}({xjs})";
22         }

复制代码

前端js代码

复制代码

 1  //1. 原始写法2   $('<script/>').attr('src', 'http://localhost:1912/CorsTest/GetInfor4?callBack=myCallBack&userName=ypf').appendTo("body")3   //2. 封装写法4   CrossData('http://localhost:1912/CorsTest/GetInfor4', { userName: "ypf" }, 'myCallBack');5 6 7 　　　　　//回调方法8         function myCallBack(data) {9             console.log(data);
10             console.log(data.id);
11             console.log(data.userName);
12         }
13         //封装跨域方法
14         function CrossData(url, data, callBackMethord) {
15             var queryStr = '?';
16             for (var key in data) {
17                 queryStr += key + '=' + data[key] + '&'
18             }
19             var newUrl = url + queryStr + 'callBack=' + callBackMethord;
20             $('<script/>').attr('src', newUrl).appendTo("body");
21         }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/438481.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

手机存储android文件怎么打开,安卓手机如何打开.jio文件？

手机存储android文件怎么打开,安卓手机如何打开.jio文件？

01安卓手机无法打开.jio文件&#xff0c;需要在电脑上安装久其通用数据管理平台软件打开。进入软件首页&#xff0c;点击菜单栏“装入”按钮&#xff0c;弹出“数据装入向然后导”&#xff0c;单击文件夹图标&#xff0c;在弹出“打开”窗口中选择装入数据的路径&#xff0c;单…
阅读更多...
第五节：WebApi的三大过滤器

第五节：WebApi的三大过滤器

一. 基本说明 1. 简介&#xff1a; WebApi下的过滤器和MVC下的过滤器有一些区别,首先我们要注意的是通常建WebApi项目时&#xff0c;会自动把MVC的程序集也引入进来&#xff0c;所以我们在使用WebApi下的过滤器的时候&#xff0c;要引入“ System.Web.Http”这个程序集&#x…
阅读更多...
android动态贴纸实现原理,人脸动态贴纸sdk算法详解，人脸动态贴纸功能如何实现...

android动态贴纸实现原理,人脸动态贴纸sdk算法详解，人脸动态贴纸功能如何实现...

原标题&#xff1a;人脸动态贴纸sdk算法详解&#xff0c;人脸动态贴纸功能如何实现泛娱乐行业在互联网领域中发展趋势逐渐增强&#xff0c;而直播、短视频、视频社交等作为头部产品受到了众多用户的关注和喜爱。为了能够更好的满足用户体验&#xff0c;众多APP纷纷开始接入人脸…
阅读更多...
第六节：WebApi的部署方式(自托管)

第六节：WebApi的部署方式(自托管)

一. 简单说明 开篇就介绍过WebApi和MVC相比&#xff0c;其中优势之一就是WebApi可以不依赖于IIS部署&#xff0c;可以自托管&#xff0c;当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比较&#xff0c;在.Net Core下&#xff0c;当然就另行别论。 下面我们重点介绍的就…
阅读更多...
第七节：WebApi与Unity整合进行依赖注入和AOP的实现

第七节：WebApi与Unity整合进行依赖注入和AOP的实现

一. IOC和DI 1. 通过Nuget引入Unity程序集。 PS:【版本&#xff1a;5.8.6】 2. 新建DIFactory类&#xff0c;用来读取Unity的配置文件并创建Unity容器&#xff0c;需要注意的是DIFactory类需要声明成单例。 PS&#xff1a;这里采用静态构造函数(必须是无参的)的形式来实现单…
阅读更多...
第八节：常见安全隐患和传统的基于Session和Token的安全校验

第八节：常见安全隐患和传统的基于Session和Token的安全校验

一. 常见的安全隐患 1. SQL注入 常见的案例&#xff1a; String query "SELECT * FROM T_User WHERE userID" Request["userID"] "; 这个时候&#xff0c;只需要在传递过来的userID后面加上个&#xff1a; or 11&#xff0c;即可以获取T_User表中…
阅读更多...
android手机设置时间设置,如何设置电信定制手机日期与时间

android手机设置时间设置,如何设置电信定制手机日期与时间

使用电信定制手机如A765e、A600e、A560e等的时候&#xff0c;可能会发现手机的日期和时间没法自己设置。这主要是因为手机使用电信卡时&#xff0c;会自动与电信基站进行交互并自动调节日期与时间。所以不论使用电信定制的单模或双模手机(单模是指手机只有一个卡槽&#xff0c;…
阅读更多...
第二节 CSS入门介绍

第二节 CSS入门介绍

一.背景 这里将陆续介绍前端CSS中相关知识&#xff0c;先介绍CSS2.1&#xff0c;后续会介绍CSS3的相关属性&#xff0c;通过该系列的文章&#xff0c;希望能给准备转战前端的人员一些帮助&#xff0c;同时也帮助自己梳理知识&#xff0c;文章中如有错误&#xff0c;欢迎指出。 …
阅读更多...
三星sec.android.soagent,3.0降级2.5教程

三星sec.android.soagent,3.0降级2.5教程

给小白看的。下载五件套&#xff0c;odia&#xff0c;驱动&#xff0c;地址&#xff1a;http://www.samsungmembers.cn/thread-1019962-110-150.html&#xff0c;或者自己论坛搜索&#xff0c;请下载G9810ZCU2BTJA&#xff0c;别下k3最后一个版本的会出问题&#xff0c;刷机后再…
阅读更多...
第三节 入门属性

第三节 入门属性

1.七个基本属性 颜色&#xff1a;color&#xff0c;背景颜色&#xff1a;background-color&#xff0c;字体大小&#xff1a;font-size&#xff0c;加粗&#xff1a;font-weight:bold&#xff0c;倾斜&#xff1a;font-style:italic&#xff0c; 文字居中&#xff1a;text-alig…
阅读更多...
第四节 CSS继承性和层叠性

第四节 CSS继承性和层叠性

一. 继承性 1. 含义&#xff1a;从自己开始直到所包裹的最小的元素&#xff0c;都可以继承一些特有的属性。 2. 作用范围&#xff1a; a. color、text-开头的、line-开头的、font-开头的&#xff0c;均可以继承。 b. 文字样式的&#xff0c;都能继承&#xff1b;所有关于盒子的…
阅读更多...
html鼠标划过显示图片,jquery实现鼠标滑过小图查看大图的方法

html鼠标划过显示图片,jquery实现鼠标滑过小图查看大图的方法

本文实例讲述了jquery实现鼠标滑过小图查看大图的方法。分享给大家供大家参考。具体实现方法如下&#xff1a;1. CSS部分&#xff1a;ul{list-style:none;}li{float:left;margin-left:10px;}img{border:#CCCCCC solid 1px;}#max{position:absolute;display:none; /*隐藏层*/}2.…
阅读更多...
第五节 盒子模型

第五节 盒子模型

1. 盒子模型的五个属性 盒模型主要涉及的属性有&#xff1a;width(宽度)、height(高度)、padding(内边距)、 border(边框)、margin(外边距)。 2. 盒子模型的两种模式 模式一&#xff1a;width盒子自身的width &#xff08;正常情况&#xff09; 模式二&#xff1a;width盒子自…
阅读更多...
第六节 标准文档流

第六节 标准文档流

一.标准文档流 标准文档流包括&#xff1a;块级元素和行内元素。 (1). 块级元素 特点&#xff1a; 一个元素单独一行&#xff0c;不与其他元素并行&#xff0c;可以设置其宽度和高度&#xff0c;如果不设置宽度&#xff0c;宽度默认为其父元素的100%。 (2). 行内元素 特点&…
阅读更多...
第七节 浮动

第七节 浮动

一. 浮动的性质 1. 脱标&#xff08;脱离标准文档流&#xff09; 无论是块级元素还是行内元素&#xff0c;一旦浮动了&#xff0c;就脱离标准文档流&#xff08;脱标&#xff09;了&#xff0c;就可以设置宽和高了。 下面事例是两个div&#xff0c;其中第一个div浮动了。 1 &l…
阅读更多...
html5测试 iphone6sp,5款旧iPhone测试iOS运行速度：只有6S速度明显提升

html5测试 iphone6sp,5款旧iPhone测试iOS运行速度：只有6S速度明显提升

苹果在周三凌晨推送了iOS13.3.1更新&#xff0c;这款最新系统修复了许多Bug&#xff0c;而且还新增了功能。那么升级后的流畅度表现如何呢&#xff1f;外媒就在第一时间将iPhoneSE、iPhone6S、iPhone7、iPhone8、iPhoneXR这5款旧iPhone进行了一次速度测试&#xff0c;与iOS13.3…
阅读更多...
第八节 定位

第八节 定位

一. 定位介绍 谈到定位&#xff0c;顾名思义&#xff0c;就确定元素的位置&#xff0c;定位分为三种&#xff1a;相对定位、绝对定位、固定定位&#xff1b;分别用 position&#xff1a;relative、position&#xff1a;absolute、position&#xff1a;fixed来表示&#xff0c;它…
阅读更多...
html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

html将字符串按逗号分隔,js如何截取以逗号隔开的字符串

使用string对象的split()方法能够处理。正则表达式定义&#xff1a; split() 方法用于把一个字符串分割成字符串数组。数组使用方法以下&#xff1a;cdnstringObject.split(separator,howmany)对象参数描述&#xff1a;blogseparator 必需。字符串或正则表达式&#xff0c;从该…
阅读更多...
CSS块级元素与行内元素的区别和联系

CSS块级元素与行内元素的区别和联系

块元素(block element)一般是其他元素的容器元素&#xff0c;能容纳其他块元素或内联元素。块元素就好比一个四方块&#xff0c;可以放其他的四方块&#xff0c;并可以呈现在页面上任何地方。 默认情况下块元素&#xff0c;是独占一行的常见的块元素&#xff1a;div、p、h1-h6…
阅读更多...
联想台式计算机驱动程序,联想键盘驱动程序

联想台式计算机驱动程序,联想键盘驱动程序

联想键盘驱动程序官方版联想键盘驱动程序官方版是款适合联想键盘的用户打造的驱动程序。联想键盘驱动程序主要作用就是可以帮助用户解决键盘输入过程中的各种问题&#xff0c;包括联想键无法正常使用与无法被电脑识别的问题。联想键盘驱动程序还可以让用户的键盘与主机完美的兼…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023