博客 (61)

AspNetPager 官网给出了示例：

即在引入 bootstrap.css 后添加以下样式：

.pagination a[disabled] { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; }
.pagination span.active { z-index: 2; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; }

给 AspNetPager 控件添加以下属性：

CssClass="pagination" LayoutType="Ul" PagingButtonLayoutType="UnorderedList" PagingButtonSpacing="0" CurrentPageButtonClass="active"

然而，当页数超过 30 时（ShowBoxThreshold 的默认值）会显示 PageIndexBox，可以使之不显示：

ShowPageIndexBox="Never"

或者添加以下样式修饰它：

.pagination input[type=text] { width: 50px !important; display: inline-block; text-align:center; }
.pagination input[type=button] { margin-top: -3px; margin-left: 5px; }

并增加属性：

PageIndexBoxClass="form-control" SubmitButtonClass="btn btn-primary"

另外，我还添加了以下属性来适应我的项目：

UrlPaging="true" AlwaysShow="True" AlwaysShowFirstLastPageNumber="true" ShowFirstLast="false" NumericButtonCount="3"

1. 在 NuGet 中安装 Microsoft.AspNetCore.Session 和 Newtonsoft.Json

2. 打开 Startup.cs，在 ConfigureServices 方法中加入（视情况配置相关属性）

   services.AddSession(options =>
   {
       // 设置了一个较短的时间，方便测试
       options.IdleTimeout = TimeSpan.FromSeconds(10);
       options.CookieHttpOnly = true;
   });

3. 在 Configure 方法中加入

   app.UseSession();

4. 添加 Extensions 文件夹并添加类 SessionExtensions.cs

   using Microsoft.AspNetCore.Http;
   using Newtonsoft.Json;
   
   public static class SessionExtensions
   {
       public static void Set<T>(this ISession session, string key, T value)
       {
           session.SetString(key, JsonConvert.SerializeObject(value));
       }
   
       public static T Get<T>(this ISession session, string key)
       {
           var value = session.GetString(key);
           return value == null ? default(T) :
                                 JsonConvert.DeserializeObject<T>(value);
       }
   }

5. 使用方法

   HttpContext.Session.Set("abc", 123);
   var v1 = HttpContext.Session.Get<int>("abc");
   HttpContext.Session.Remove("abc");
   var v2 = HttpContext.Session.Get<int>("abc");
   // v1 = 123, v2 = 0

<input name="aaa" id="theinput" type="checkbox" />

// 选中它

$('input[name="aaa"]').prop("checked", true);

// 取消它

$('input[name="aaa"]').prop("checked", false);

// 顺便提一下将 select 选中首项

$("#ddl_types option:first").prop('selected', true);

// 获取选中的项

$('input[name="aaa"]:checked').each(function(){ });

// 获取项是否选中

$('#theinput').is(':checked')

或

$('#theinput').prop('checked')

或

theinput.checked

// 获取 radio 选中项的值

$('input[name="aaa"]:checked').val()

前言

　　最近在学习Web Api框架的时候接触到了async/await，这个特性是.NET 4.5引入的，由于之前对于异步编程不是很了解，所以花费了一些时间学习一下相关的知识，并整理成这篇博客，如果在阅读的过程中发现不对的地方，欢迎大家指正。

同步编程与异步编程

　　通常情况下，我们写的C#代码就是同步的，运行在同一个线程中，从程序的第一行代码到最后一句代码顺序执行。而异步编程的核心是使用多线程，通过让不同的线程执行不同的任务，实现不同代码的并行运行。

前台线程与后台线程

　　关于多线程，早在.NET2.0时代，基础类库中就提供了Thread实现。默认情况下，实例化一个Thread创建的是前台线程，只要有前台线程在运行，应用程序的进程就一直处于运行状态，以控制台应用程序为例，在Main方法中实例化一个Thread，这个Main方法就会等待Thread线程执行完毕才退出。而对于后台线程，应用程序将不考虑其是否执行完毕，只要应用程序的主线程和前台线程执行完毕就可以退出，退出后所有的后台线程将被自动终止。来看代码应该更清楚一些：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("主线程开始");

            //实例化Thread，默认创建前台线程
            Thread t1 = new Thread(DoRun1);
            t1.Start();

            //可以通过修改Thread的IsBackground，将其变为后台线程
            Thread t2 = new Thread(DoRun2) { IsBackground = true };
            t2.Start();

            Console.WriteLine("主线程结束");
        }

        static void DoRun1()
        {
            Thread.Sleep(500);
            Console.WriteLine("这是前台线程调用");
        }

        static void DoRun2()
        {
            Thread.Sleep(1500);
            Console.WriteLine("这是后台线程调用");
        }
    }
}

　　运行上面的代码，可以看到DoRun2方法的打印信息“这是后台线程调用”将不会被显示出来，因为应用程序执行完主线程和前台线程后，就自动退出了，所有的后台线程将被自动终止。这里后台线程设置了等待1.5s，假如这个后台线程比前台线程或主线程提前执行完毕，对应的信息“这是后台线程调用”将可以被成功打印出来。

Task

　　.NET 4.0推出了新一代的多线程模型Task。async/await特性是与Task紧密相关的，所以在了解async/await前必须充分了解Task的使用。这里将以一个简单的Demo来看一下Task的使用，同时与Thread的创建方式做一下对比。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Threading;
using System.Threading.Tasks;

namespace TestApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("主线程启动");
            
            //.NET 4.5引入了Task.Run静态方法来启动一个线程
            Task.Run(() => { Thread.Sleep(1000); Console.WriteLine("Task1启动"); });

            //Task启动的是后台线程，假如要在主线程中等待后台线程执行完毕，可以调用Wait方法
            Task task = Task.Run(() => { Thread.Sleep(500); Console.WriteLine("Task2启动"); });
            task.Wait();
            
            Console.WriteLine("主线程结束");
        }
    }
}

　　首先，必须明确一点是Task启动的线程是后台线程，不过可以通过在Main方法中调用task.Wait()方法，使应用程序等待task执行完毕。Task与Thread的一个重要区分点是：Task底层是使用线程池的，而Thread每次实例化都会创建一个新的线程。这里可以通过这段代码做一次验证：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Threading;
using System.Threading.Tasks;

namespace TestApp
{
    class Program
    {
        static void DoRun1()
        {
            Console.WriteLine("Thread Id =" + Thread.CurrentThread.ManagedThreadId);
        }

        static void DoRun2()
        {
            Thread.Sleep(50);
            Console.WriteLine("Task调用Thread Id =" + Thread.CurrentThread.ManagedThreadId);
        }

        static void Main(string[] args)
        {
            for (int i = 0; i < 50; i++)
            {
                new Thread(DoRun1).Start();
            }

            for (int i = 0; i < 50; i++)
            {
                Task.Run(() => { DoRun2(); });
            }

            //让应用程序不立即退出
            Console.Read();
        }
    }
}

　　运行代码，可以看到DoRun1()方法每次的Thread Id都是不同的，而DoRun2()方法的Thread Id是重复出现的。我们知道线程的创建和销毁是一个开销比较大的操作，Task.Run()每次执行将不会立即创建一个新线程，而是到CLR线程池查看是否有空闲的线程，有的话就取一个线程处理这个请求，处理完请求后再把线程放回线程池，这个线程也不会立即撤销，而是设置为空闲状态，可供线程池再次调度，从而减少开销。

Task<TResult>

　　Task<TResult>是Task的泛型版本，这两个之间的最大不同是Task<TResult>可以有一个返回值，看一下代码应该一目了然： 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Threading;
using System.Threading.Tasks;

namespace TestApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("主线程开始");

            Task task = Task.Run(() => { Thread.Sleep(1000); return Thread.CurrentThread.ManagedThreadId.ToString(); });
            Console.WriteLine(task.Result);

            Console.WriteLine("主线程结束");
        }
    }
}

　　Task<TResult>的实例对象有一个Result属性，当在Main方法中调用task.Result的时候，将等待task执行完毕并得到返回值，这里的效果跟调用task.Wait()是一样的，只是多了一个返回值。

async/await 特性

　　经过前面的铺垫，终于迎来了这篇文章的主角async/await，还是先通过代码来感受一下这两个特性的使用。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Threading;
using System.Threading.Tasks;

namespace TestApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("-------主线程启动-------");
            Task task = GetLengthAsync();
            Console.WriteLine("Main方法做其他事情");
            Console.WriteLine("Task返回的值" + task.Result);
            Console.WriteLine("-------主线程结束-------");
        }

        static async Task GetLengthAsync()
        {
            Console.WriteLine("GetLengthAsync Start");  
            string str = await GetStringAsync();
            Console.WriteLine("GetLengthAsync End");
            return str.Length;
        }

        static Task GetStringAsync()
        {
            return Task.Run(() => { Thread.Sleep(2000); return "finished"; });
        }
    }
}

　　首先来看一下async关键字。async用来修饰方法，表明这个方法是异步的，声明的方法的返回类型必须为：void或Task或Task<TResult>。返回类型为Task的异步方法中无需使用return返回值，而返回类型为Task<TResult>的异步方法中必须使用return返回一个TResult的值，如上述Demo中的异步方法返回一个int。而返回类型可为void，则是为了和事件处理程序兼容，比如下面的示例：

public Form1()
{
    InitializeComponent();
    btnDo.Click += Down;
}

public async void Down(object sender, EventArgs e)
{
    btnDo.Enabled = false;
    string str = await Run();
    labText.Text = str;
    btnDo.Enabled = true;
}

public Task Run()
{
    return Task.Run(() => { Thread.Sleep(5000); return DateTime.Now.ToString(); });
}

　　再来看一下await关键字。await必须用来修饰Task或Task<TResult>，而且只能出现在已经用async关键字修饰的异步方法中。

　　通常情况下，async/await必须成对出现才有意义，假如一个方法声明为async，但却没有使用await关键字，则这个方法在执行的时候就被当作同步方法，这时编译器也会抛出警告提示async修饰的方法中没有使用await，将被作为同步方法使用。了解了关键字async\await的特点后，我们来看一下上述Demo在控制台会输入什么吧。

　　

　　输出的结果已经很明确地告诉我们整个执行流程了。GetLengthAsync异步方法刚开始是同步执行的，所以"GetLengthAsync Start"字符串会被打印出来，直到遇到第一个await关键字，真正的异步任务GetStringAsync开始执行，await相当于起到一个标记/唤醒点的作用，同时将控制权放回给Main方法，"Main方法做其他事情"字符串会被打印出来。之后由于Main方法需要访问到task.Result，所以就会等待异步方法GetLengthAsync的执行，而GetLengthAsync又等待GetStringAsync的执行，一旦GetStringAsync执行完毕，就会回到await GetStringAsync这个点上执行往下执行，这时"GetLengthAsync End"字符串就会被打印出来。

　　当然，我们也可以使用下面的方法完成上面控制台的输出。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Threading;
using System.Threading.Tasks;

namespace TestApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("-------主线程启动-------");
            Task task = GetLengthAsync();
            Console.WriteLine("Main方法做其他事情");
            Console.WriteLine("Task返回的值" + task.Result);
            Console.WriteLine("-------主线程结束-------");
        }

        static Task GetLengthAsync()
        {
            Console.WriteLine("GetLengthAsync Start");
            Task task = Task.Run(() => { string str = GetStringAsync().Result; 
                Console.WriteLine("GetLengthAsync End"); 
                return str.Length; });           
            return task;
        }

        static Task GetStringAsync()
        {
            return Task.Run(() => { Thread.Sleep(2000); return "finished"; });
        }
    }
}

　　对比两种方法，是不是async\await关键字的原理其实就是通过使用一个线程完成异步调用吗？答案是否定的。async关键字表明可以在方法内部使用await关键字，方法在执行到await前都是同步执行的，运行到await处就会挂起，并返回到Main方法中，直到await标记的Task执行完毕，才唤醒回到await点上，继续向下执行。更深入点的介绍可以查看文章末尾的参考文献。

async/await 实际应用

　　微软已经对一些基础类库的方法提供了异步实现，接下来将实现一个例子来介绍一下async/await的实际应用。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Threading;
using System.Threading.Tasks;
using System.Net;

namespace TestApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("开始获取博客园首页字符数量");
            Task task1 = CountCharsAsync("http://www.cnblogs.com");
            Console.WriteLine("开始获取百度首页字符数量");
            Task task2 = CountCharsAsync("http://www.baidu.com");

            Console.WriteLine("Main方法中做其他事情");

            Console.WriteLine("博客园:" + task1.Result);
            Console.WriteLine("百度:" + task2.Result);
        }

        static async Task CountCharsAsync(string url)
        {
            WebClient wc = new WebClient();
            string result = await wc.DownloadStringTaskAsync(new Uri(url));
            return result.Length;
        }
    }
}

参考文献：<IIIustrated C# 2012>     关于async/await的FAQ    《深入理解C#》

如果使用了 loop 属性，那么视频播放结束时不会触发 onended 事件。

如果使用了 loop 属性，则任何时候获取 ended 值都是 false；如果不使用 loop，但在 onended 事件中重新 play()（或者在添加了属性 autoplay 的情况下更换 src 值），那么中间会有大概 3 毫秒的时间拿到的 ended 值是 true。

播放过程中更改 src 值并不会触发 onended 事件，因为还没有播放结束。如果设了 autoplay，那么更改 src 值后会自动播放，播放结束后仍然会触发 onended（前提是没有设置 loop）。

更多请参考：

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

http://www.w3school.com.cn/html5/html5_video.asp

本文适用于 IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10 等 Web 服务器，IIS 6（Windows Server 2003）用户请查阅 ISAPI_Rewrite。

在 IIS 中要实现 URL 重写，需要下载并安装 URL Rewrite 组件，http://www.iis.net/downloads/microsoft/url-rewrite

在 IIS 管理器中选中任意网站，主窗口可见“URL 重写”，双击打开。（如果你想配置这台服务器的所有网站有效，直接选中左侧菜单中的服务器名，打开“URL 重写”即可。）

右侧“添加规则...”，选择“入站规则”中的“空白规则”，确定。

填写规则名称，在“匹配 URL”框中选择“与模式匹配”，根据自己的需求选择“正则表达式”、“通配符”或“完全匹配”，“模式”中填写要防盗链的文件路径规则，例如正则表达式 ^.*\.(jpg|png)$ 将匹配所有目录下的 .jpg 和 .png 文件。

接下来将设置图片在允许的域名下显示。

在“条件”框中选择“全部匹配”，点击“添加”，“条件输入”中填写“{HTTP_REFERER}”（不含引号，含花括号），表示判断 HTTP 请求中 Header 的 Referer。选择“与模式不匹配”，模式中填写匹配规则，如 ^$ 表示允许 Referer 为空（如直接从浏览器打开的情况），再加一个规则 ^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$ 表示允许在 xoyozo.net 和 himiao.com 这两个域名下显示图片。当然如果你有很多域名或需要设置不同的规则，可以继续添加，但最好把访问量大的规则移到前面，从而减少系统匹配次数，提高访问效率。

最后，在“操作”框中设置你想要的处理方式，可以是“重定向”到一张防盗链提醒的图片上（推荐类型临时 307），也可以自定义响应，例如，状态代码（403），子代码（0），原因（Forbidden: Access is denied.），描述（You do not have permission to view this directory or page using the credentials that you supplied.），查看 HTTP 状态代码。

如果你是配置某个网站的“URL 重写”，那么在网站根目录下的 web.config 文件中，<system.webServer /> 节点下可以看到刚刚配置的规则，例如：

<rewrite>
  <rules>
    <rule name="RequestBlockingRule1" stopProcessing="true">
      <match url="^.*\.(jpg|png)$" />
      <conditions>
        <add input="{HTTP_REFERER}" pattern="^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$" negate="true" />
        <add input="{HTTP_REFERER}" pattern="^$" negate="true" />
      </conditions>
      <action type="Redirect" url="http://42.96.165.253/logo2013.png" redirectType="Temporary" />
    </rule>
  </rules>
</rewrite>

jQuery 请求代码：

$.ajax({
  url: "xxxxxx",
  //method: "GET", // 默认 GET（当 dataType 为 jsonp 时此参数无效，始终以 GET 方式请求）
  data: $('#myForm').serialize(), // 要传递的参数，这里提交表单 myForm 的内容
  dataType: "jsonp"
  //, jsonp: "callback" // 请求中的回调函数的参数名，默认值 callback
  //, jsonpCallback: "jQuery_abc" // 本地回调函数名，不指定则随机
})
  .done(function () {
    alert("done");
    if (true) {
      $('#myForm')[0].reset();
    }
  })
  .fail(function () { alert("fail"); })
  .always(function () { alert("complete"); });

ASP.NET 处理代码：

JavaScriptSerializer jss = new JavaScriptSerializer();

string json = jss.Serialize(new { result = new { success = true, msg = "成功" } });

if (!string.IsNullOrWhiteSpace(Request["callback"])
  && Regex.IsMatch(Request["callback"], @"[_$a-zA-Z][$\w]*"))
{
  Response.ContentType = "application/javascript; charset=utf-8";
  Response.Write(json + Request["callback"] + "(" + json + ")");
}
else
{
  Response.ContentType = "application/json; charset=utf-8";
  Response.Write(json);
}

Response.End();

编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。

十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；

十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；

八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；

六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；

四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；

二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；

如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？

没错，本文就是以HTML5 Device API为核心，对HTML5的一些新接口作了一个完整的测试，希望能让大家有所启发。

目录：

一、让音乐随心而动 – 音频处理 Web audio API
二、捕捉用户摄像头 – 媒体流 Media Capture
三、你是逗逼？ – 语音识别 Web Speech API
四、让我尽情呵护你 – 设备电量 Battery API
五、获取用户位置 – 地理位置 Geolocation API
六、把用户捧在手心 – 环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API

一、让音乐随心而动 – 音频处理 Web audio API

简介：

Audio对象提供的只是音频文件的播放，而Web Audio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。

系统要求：

ios6+、android chrome、android firefox

实例：

http://sy.qq.com/brucewan/device-api/web-audio.html

核心代码：

var context = new webkitAudioContext();
var source = context.createBufferSource();   // 创建一个声音源
source.buffer = buffer;   // 告诉该源播放何物 
createBufferSourcesource.connect(context.destination);   // 将该源与硬件相连
source.start(0); //播放

技术分析：

当我们加载完音频数据后，我们将创建一个全局的AudioContext对象来对音频进行处理，AudioContext可以创建各种不同功能类型的音频节点AudioNode，比如

1、源节点（source node）

我们可以使用两种方式加载音频数据：
<1>、audio标签

var sound, audio = new Audio();
audio.addEventListener('canplay', function() {
 sound = context.createMediaElementSource(audio);
 sound.connect(context.destination);
});
audio.src = '/audio.mp3';

<2>、XMLHttpRequest

var sound, context = createAudioContext();
var audioURl = '/audio.mp3'; // 音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer'; 
xhr.onload = function() {
 context.decodeAudioData(request.response, function (buffer) {
 source = context.createBufferSource();
 source.buffer = buffer;
 source.connect(context.destination);
 }
}
xhr.send();

2、分析节点（analyser node）

我们可以使用AnalyserNode来对音谱进行分析，例如：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

function draw() {
 drawVisual = requestAnimationFrame(draw);
 analyser.getByteTimeDomainData(dataArray);
 // 将dataArray数据以canvas方式渲染出来
};

draw();

3、处理节点（gain node、panner node、wave shaper node、delay node、convolver node等）

不同的处理节点有不同的作用，比如使用BiquadFilterNode调整音色（大量滤波器）、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。

需要了解更多的音频节点可能参考：
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

4、目的节点（destination node）

所有被渲染音频流到达的最终地点

思维发散：

1、可以让CSS3动画跟随背景音乐舞动，可以为我们的网页增色不少；
2、可以尝试制作H5酷酷的变声应用，增加与用户的互动；
3、甚至可以尝试H5音乐创作。

看看google的创意：http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html

二、捕捉用户摄像头 – 媒体流 Media Capture

简介：

通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。

系统要求：

android chrome、android firefox

实例：

捕获用户摄像头 捕获用户麦克风

http://sy.qq.com/brucewan/device-api/camera.html

http://sy.qq.com/brucewan/device-api/microphone-usermedia.html

核心代码：

1、摄像头捕捉

navigator.webkitGetUserMedia ({video: true}, function(stream) {
 video.src = window.URL.createObjectURL(stream);
 localMediaStream = stream;
}, function(e){

})

2、从视频流中拍照

btnCapture.addEventListener('touchend', function(){
	if (localMediaStream) {
		canvas.setAttribute('width', video.videoWidth);
		canvas.setAttribute('height', video.videoHeight);
		ctx.drawImage(video, 0, 0);
	}
}, false);

3、用户声音录制

navigator.getUserMedia({audio:true}, function(e) {
	context = new audioContext();
	audioInput = context.createMediaStreamSource(e);	
	volume = context.createGain();
	recorder = context.createScriptProcessor(2048, 2, 2);
	recorder.onaudioprocess = function(e){
		recordingLength += 2048;
		recorder.connect (context.destination); 
	}	
}, function(error){});

4、保存用户录制的声音

var buffer = new ArrayBuffer(44 + interleaved.length * 2);
var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob
… audio.src = event.target.result;

思维发散：

1、从视频拍照自定义头像；
2、H5视频聊天；
3、结合canvas完成好玩的照片合成及处理；
4、结合Web Audio制作有意思变声应用。

三、你是逗逼？ – 语音识别 Web Speech API简介：

1、将文本转换成语音；
2、将语音识别为文本。

系统要求：
ios7+，android chrome，android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/microphone-webspeech.html

核心代码：

1、文本转换成语音，使用SpeechSynthesisUtterance对象；

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘识别的文本内容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);

2、语音转换为文本，使用SpeechRecognition对象。

var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){
	var interim_transcript = ''; 
	for (var i = event.resultIndex; i < event.results.length; ++i) {
		final_transcript += event.results[i][0].transcript;
	}
};

测试结论：

1、Android支持不稳定；语音识别测试失败（暂且认为是某些内置接口被墙所致）。

思维发散：

1、当语音识别成为可能，那声音控制将可以展示其强大的功能。在某些场景，比如开车、网络电视，声音控制将大大改善用户体验；
2、H5游戏中最终分数播报，股票信息实时声音提示，Web Speech都可以大放异彩。

 四、让我尽情呵护你 – 设备电量 Battery API简介：

查询用户设备电量及是否正在充电。

系统要求：

android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/battery.html

核心代码：

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
 str += '<p>你的浏览器支持HTML5 Battery API</p>';
 if(battery.charging) {
 str += '<p>你的设备正在充电</p>';
} else {
 str += '<p>你的设备未处于充电状态</p>';
}
 str += '<p>你的设备剩余'+ parseInt(battery.level*100)+'%的电量</p>';
} else {
 str += '<p>你的浏览器不支持HTML5 Battery API</p>';
}

测试结论：

1、QQ浏览器与UC浏览器支持该接口，但未正确显示设备电池信息；
2、caniuse显示android chrome42支持该接口，实测不支持。

思维发散：

相对而言，我觉得这个接口有些鸡肋。
很显然，并不合适用HTML5做电池管理方面的工作，它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作，当用户设备电量不足时，进入省电模式，比如停用滤镜、摄像头开启、webGL、减少网络请求等。

 五、获取用户位置 – 地理位置 Geolocation简介：

Geolocation API用于将用户当前地理位置信息共享给信任的站点，目前主流移动设备都能够支持。

系统要求：

ios6+、android2.3+

测试实例：

http://sy.qq.com/brucewan/device-api/geolocation.html

核心代码：

var domInfo = $("#info");

// 获取位置坐标
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
	domInfo.innerHTML="抱歉，你的浏览器不支持地理定位！";
}

// 使用腾讯地图显示位置
function showPosition(position) {
	var lat=position.coords.latitude;
	var lon=position.coords.longitude;

	mapholder = $('#mapholder')
	mapholder.style.height='250px';
	mapholder.style.width = document.documentElement.clientWidth + 'px';

	var center = new soso.maps.LatLng(lat, lon);
	var map = new soso.maps.Map(mapholder,{
		center: center,
		zoomLevel: 13
	});

	var geolocation = new soso.maps.Geolocation();
	var marker = null;
	geolocation.position({}, function(results, status) {
		console.log(results);
		var city = $("#info");
		if (status == soso.maps.GeolocationStatus.OK) {
			map.setCenter(results.latLng);
			domInfo.innerHTML = '你当前所在城市: ' + results.name;
		if (marker != null) {
			marker.setMap(null);
		}
		// 设置标记
		marker = new soso.maps.Marker({
			map: map,
			position:results.latLng
		});
		} else {
			alert("检索没有结果，原因: " + status);
		}
	});
}

测试结论：

1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。
2、初测3g环境下比wifi环境理定位更准确；
3、测试三星 GT-S6358(android2.3) geolocation存在，但显示位置信息不可用POSITION_UNAVAILABLE。

六、把用户捧在手心 – 环境光 Ambient Light简介：

Ambient Light API定义了一些事件，这些时间可以提供源于周围光亮程度的信息，这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。

系统要求：

android firefox

测试实例：

http://sy.qq.com/brucewan/device-api/ambient-light.html

核心代码：

这段代码实现感应用前当前环境光强度，调整网页背景和文字颜色。

var domInfo = $('#info');
if (!('ondevicelight' in window)) {
	domInfo.innerHTML = '你的设备不支持环境光Ambient Light API';
} else {
	var lightValue = document.getElementById('dl-value');
	window.addEventListener('devicelight', function(event) {
		domInfo.innerHTML = '当前环境光线强度为：' + Math.round(event.value) + 'lux';
		var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
		document.body.style.backgroundColor = backgroundColor;
		if(event.value < 50) {
			document.body.style.color = '#fff'
		} else {
			document.body.style.color = '#000'
		}
	});
}

思维发散：

该接口适合的范围很窄，却能做出很贴心的用户体验。

1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品，我们自然可以调整我们背景与文字颜色让用户感觉到舒适，我们还可以来一段安静的音乐，甚至使用Web Speech API播报当前时间，并说一声“晚安”，何其温馨；

2、该接口也可以应用于H5游戏场景，比如日落时分，我们可以在游戏中使用安静祥和的游戏场景；

3、当用户在工作时间将手机放在暗处，偷偷地瞄一眼股市行情的时候，我们可以用语音大声播报，“亲爱的，不用担心，你的股票中国中车马上就要跌停了”，多美的画面。

参考文献：
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/

数据库设计规范是个技术含量相对低的话题，只需要对标准和规范的坚持即可做到。当系统越来越庞大，严格控制数据库的设计人员，并且有一份规范书供执行参考。在程序框架中，也有一份强制性的约定，当不遵守规范时报错误。

以下20个条款是我从一个超过1000个数据库表的大型ERP系统中提炼出来的设计约定，供参考。

 

1  所有的表的第一个字段是记录编号Recnum，用于数据维护

[Recnum] [decimal] (8, 0) NOT NULL IDENTITY(1, 1)

在进行数据维护的时候，我们可以直接这样写：

UPDATE Company SET Code='FLEX'  WHERE Recnum=23

2 每个表增加4个必备字段，用于记录该笔数据的创建时间，创建人，最后修改人，最后修改时间

[CreatedDate] [datetime] NULL,
[CreatedBy] [nvarchar] (10) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[RevisedDate] [datetime] NULL,
[RevisedBy] [nvarchar] (10) COLLATE SQL_Latin1_General_CP1_CI_AS NULL

框架程序中会强制读取这几个字段，默认写入值。

 

3  主从表的主外键设计

主表用参考编号RefNo作为主键，从表用RefNo,EntryNo作为主键。RefNo是字符串类型，可用于单据编码功能中自动填写单据流水号，从表的EntryNo是行号，LineNo是SQL Server 的关键字，所以用EntryNo作为行号。

如果是三层表，则第三层表的主键依次是RefNo,EntryNo,DetailEntryNo，第三个主键用于自动增长行号。

 

4 设计单据状态字段

字段	含义
Posted	过帐，已确认
Closed	已完成
Cancelled	已取消
Approved	已批核
Issued	已发料
Finished	已完成
Suspended	已取消

5 字段含义相近，把相同的单词调成前缀。

比如工作单中的成本核算，人工成本，机器成本，能源成本，用英文表示为LaborCost,MachineCost,EnergyCost

但是为了方便规组，我们把Cost调到字段的前面，于是上面三个字段命名为CostLabor,CostMachine,CostEnergy。

可读性后者要比前者好一点，Visual Studio或SQL Prompt智能感知也可帮助提高字段输入的准确率。

 

6 单据引用键命名 SourceRefNo  SourceEntryNo

销售送货Shipment会引用到是送哪张销售单据的，可以添加如下引用键SourceRefNo,SourceEntryNo，表示送货单引用的销售单的参考编号和行号。Source开头的字段一般用于单据引用关联。

 

7 数据字典键设计

比如员工主档界面的员工性别Gender，我的方法是在源代码中用枚举定义。性别枚举定义如下：

public enum Gender
{
        [StringValue("M")]
        [DisplayText("Male")]
        Male,

        [StringValue("F")]
        [DisplayText("Female")]
        Female
}

在代码中调用枚举的通用方法，读取枚举的StringValue写入到数据库中，读取枚举的DisplayText显示在界面中。

经过这一层设计，数据库中有关字典方面的设计就规范起来了，避免了数据字典的项的增减给系统带来的问题。

 

8 数值类型字段长度设计

Price/Qty 数量/单价  6个小数位   nnnnnnnnnn.nnnnnn 格式 （10.6） 
Amount 金额   2个小数位          nnnnnnnnnnnn.nn 格式（12.2） 
Total Amt 总金额 2个小数位       nnnnnnnnnnnnnn.nn 格式（14.2）

参考编号默认16个字符长度，不够用的情况下增加到30个字符，再不够用增加到60个字符。这样可以保证每张单据的第一个参考编号输入控件看起来都是一样长度。

除非特别需求，一般而言，界面中控件的长度取自映射的数据库中字段的定义长度。

 

9 每个单据表头和明细各增加10个自定义字段，基础资料表增加20个自定义字段

参考供应商主档的自定义字段，自定义字段的名称统一用UserDefinedField。

ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_1] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_2] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_3] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_4] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_5] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_6] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_7] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_8] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_9] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_10] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_11] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_12] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_13] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_14] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_15] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_16] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_17] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_18] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_19] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
ALTER TABLE Vendor ADD  COLUMN [USER_DEFINED_FIELD_20] nvarchar(100) COLLATE SQL_Latin1_General_CP1_CI_AS NULL

 

10 多货币(本位币)转换字段的设计

金额或单价默认是以日记帐中的货币为记录，当默认货币与本位币不同时需要同时记录下本位币的值。

销售单销售金额 SalesAmount或SalesAmt,本位币字段定义为SalesAmountLocal或SalesAmtLocal

通常是在原来的字段后面加Local表示本位币的值。

 

11 各种日期字段的设计

字段名称	含义
TranDate	日期帐日期 Tran是Transaction的简写
PostedDate	过帐日期
ClosedDate	完成日期
InvoiceDate	开发票日期
DueDate	截止日期
ScheduleDate	计划日期，这个字段用在不同的单据含义不同。比如销售单是指送货日期，采购单是指收货日期。
OrderDate	订单日期
PayDate	付款日期
CreatedDate	创建日期
RevisedDate	修改日期
SettleDate	付款日期
IssueDate	发出日期
ReceiptDate	收货日期
ExpireDate	过期时间

 

12 财务有关的单据包含三个标准字段

FiscalYear 财年，PeriodNo 会计期间，Period 前面二个的组合。以国外的财年为例子，FiscalYear是2015，PeriodNo是4，Period是2015/04。

欧美会计期间是从每年的4月份开始，需要注意的是会计期间与时间没有必然的联系，看到会计期间是2015/04，不一定是表示2015的4月份，它只是说这是2015财年的第四期，具体在哪个时间段需要看会计期间定义。

 

13 单据自动生成 DirectEntry

有些单据是由其它单据生成过来的，逻辑上应该不支持编辑。比如销售送货Shipment单会产生出仓单，出仓单应该不支持编辑，只能做过帐扣减库存操作。这时需要DirectEntry标准字段来表示。当手工创建一张出仓单时，将DirectEntry设为true,表示可编辑单据中的字段值，当由其它单据传递产生过来产生的出仓单，将DirectEntry设为false，表示不能编辑此单据。这种情况还发生在业务单据产生记帐凭证(Voucher)的功能中，如果可以修改由原始单据传递过来的数量金额等字段，则会导致与源单不匹配，给系统对帐产生困扰。

 

14 百分比值字段的设计

Percentage百分比值，用于折扣率，损耗率等相关比率设定的地方。推荐用数值类型表示，用脚本表示是

[ScrapRate] [decimal] (5, 2) NULL

预留两位小数，整数部分支持1-999三位数。常常是整数部分2位就可以，用3位也是为了支持一些特殊行业(物料损耗率超过100）的要求。

 

15 日志表记录编号LogNo字段设计

LogNo字段的设计有些巧妙，以出仓单为例子，一张出仓单有5行物料明细，每一行物料出仓都会扣减库存，再写物料进出日记帐，因为这五行物料出仓来自同一个出仓单，于是将这五行物料的日记帐中的LogNo都设为同一个值。于在查询数据时，以这个字段分组即可看到哪些物料是在同一个时间点上出仓的，对快速查询有很重要的作用。

 

16 基础资料表增加名称，名称长写，代用名称三个字段

比如供应商Vendor表，给它加以下三个字段：

Description 供应商名称，比如微软公司。

ExtDescription 供应商名称长写，比如电气行业的南网的全名是南方国家电网有限公司。

AltDescription 供应商名称替代名称，用在报表或是其它单据引用中。比如采购单中的供应商是用微软，还是用代用名称Microsoft，由参数(是否用代用名称)控制。

 

17 文件类表增加MD5 Hash字段

比如产品数据管理系统要读取图纸，单据功能中增加的附件文件，这类涉及文件读写引用的地方，考虑存放文件的MD5哈希值。文件的MD5相当于文件的唯一识别身份，在网上下载文件时，网站常常会放出文件的MD5值，以方便对比核对。当下载到本机的文件的MD5值与网站上给出的值不一致时，有可能这个文件被第三方程序修改过，不可信任。

 

18 数据表的主键用字符串而不是数字

比如销售单中的货币字段，是存放货币表的货币字符串值RMB/HKD/USD，还是存放货币表的数字键，1/2/3。

存放前者对于报表制作相对容易，但是修改起来相对麻烦。存放后者对修改数据容易，但对报表类或查询类操作都需要增加一个左右连接来看数字代表的货币。金蝶使用的是后者，它的BOS系统也不允许数据表之间有直接的关联，而是间接通过Id值来关联表。

在我看到的系统中，只有一个会计期间功能(财年Fiscal Year)用到数字值作主键，其余的单据全部是字符串做主键。

 

19 使用约定俗成的简写

模块Module 简写

简写	全名
SL	Sales 销售
PU	Purchasing 采购
IC	Inventory 仓库
AR	Account Receivable 应收
AP	Account Payable 应付
GL	General Ledger 总帐
PR	Production 生产

名称Name 简写

简写	全名
Uom	Unit of Measure 单位
Ccy	Currency 货币
Amt	Amount  金额
Qty	Quantity 数量
Qty Per	Quantity Per 用量
Std Output	Standard Output 标准产量
ETA	Estimated Time of Arrival 预定到达时间
ETD	Estimated Time of Departure  预定出发时间
COD	Cash On Delivery 货到付款
SO	Sales Order 销售单
PO	Purchase Order 采购单

 

20  库存单据数量状态

Qty On Hand 在手量

Qty Available 可用量

Qty On Inspect 在验数量

Qty On Commited 提交数量

Qty Reserved 预留数量

以上每个字段都有标准和行业约定的含义，不可随意修改取数方法。

1. 跨子域的iframe高度自适应

2. 完全跨域的iframe高度自适应

 

同域的我们可以轻松的做到

1. 父页面通过iframe的contentDocument或document属性访问到文档对象，进而可以取得页面的高度，通过此高度值赋值给iframe tag。

2. 子页面可以通过parent访问到父页面里引入的iframe tag，进而设置其高度。

 

但跨域的情况则不允许对子页面或父页面的文档进行访问（返回undefined），所以我们要做的就是打通或间接打通这个壁垒。

 

一、跨子域的iframe高度自适应

比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html'，这种跨子域的页面

3.html

1 2 3 4 5 6 7 8 9 10 11 12 13

<!DOCTYPE html> <html>   <head>     <meta charset='utf-8' />     <title>1.html</title>     <script type="text/javascript">         document.domain = 'jd.com'     </script>   </head>   <body>      <iframe id="ifr" src="b.jd.com/4.html" frameborder="0" width="100%"></iframe>   </body> </html>

4.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>2.html</title>     <script type="text/javascript">         document.domain = 'jd.com'     </script>   </head>   <body>      <p>这是一个ifrmae，嵌入在3.html里 </p>      <p>根据自身内容调整高度</p>      <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> <script>     // 计算页面的实际高度，iframe自适应会用到     function calcPageHeight(doc) {         var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)         var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)         var height  = Math.max(cHeight, sHeight)         return height     }     window.onload = function() {         var height = calcPageHeight(document)         parent.document.getElementById('ifr').style.height = height + 'px'          } </script>   </body> </html>

可以看到与上一篇对比，只要在两个页面里都加上document.domain就可以了

 

二、完全跨域的iframe高度自适应

分别有以下资源

• 页面 A：http://snandy.github.io/lib/iframe/A.html
• 页面 B：http://snandy.github.io/lib/iframe/B.html
• 页面 C：http://snandy.jd-app.com
• D.js：http://snandy.github.io/lib/iframe/D.js

这四个资源有如下关系

1. A里嵌入C，A和C是不同域的，即跨域iframe

2. C里嵌入B，C和B是不同域的，但A和B是同域的

3. C里嵌入D.js，D.js放在和A同域的项目里

 

通过一个间接方式实现，即通过一个隐藏的B.html来实现高度自适应。

A.html

嵌入页面C: http://snandy.jd-app.com 

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html>   <head>     <meta charset='utf-8' />     <title>A.html</title>   </head>   <body>     <iframe id="ifr" src="http://snandy.jd-app.com" frameborder="0" width="100%"></iframe>   </body> </html>

 

B.html

嵌入在C页面中，它是隐藏的，通过parent.parent访问到A，再改变A的iframe(C.html)高度，这是最关键的，因为A，B是同域的所以可以访问A的文档对象等。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<!DOCTYPE html> <html>   <head>     <meta charset='utf-8' />     <title>B.html</title>   </head>   <body>     <script type="text/javascript">         window.onload = function() {             var isSet = false             var inteval = setInterval(function() {                 var search = location.search.replace('?', '')                 if (isSet) {                     clearInterval(inteval)                     return                   }                 if (search) {                     var height = search.split('=')[1]                     var doc = parent.parent.document                     var ifr = doc.getElementById('ifr')                     ifr.style.height = height + 'px'                     isSet = true                 }             }, 500)         }     </script>   </body> </html>

 

C.html

嵌入在A中，和A不同域，要实现C的自适应，C多高则A里的iframe就设为多高。C里嵌入B.html 和 D.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!doctype html> <html> <head>     <title>C.html</title>     <meta charset="utf-8"> </head> <body>     <h3>这是一个很长的页面，我要做跨域iframe的高度自适应</h3>     <ul>         <li>页面 A：http://snandy.github.io/lib/iframe/A.html</li>         <li>页面 B：http://snandy.github.io/lib/iframe/B.html</li>         <li>页面 C：http://snandy.jd-app.com</li>         <li>D.js：http://snandy.github.io/lib/iframe/D.js</li>     </ul>     <p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p>     <iframe id="myifr" style="display:none" src="http://snandy.github.io/lib/iframe/B.html"></iframe>     <script type="text/javascript" src="http://snandy.github.io/lib/iframe/D.js"></script> </body> </html>

　　

D.js

在页面C载入后计算其高度，然后将计算出的height赋值给C里引入的iframe（B.html）的src

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 计算页面的实际高度，iframe自适应会用到 function calcPageHeight(doc) {     var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)     var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)     var height  = Math.max(cHeight, sHeight)     return height } window.onload = function() {     var doc = document     var height = calcPageHeight(doc)     var myifr = doc.getElementById('myifr')     if (myifr) {         myifr.src = 'http://snandy.github.io/lib/iframe/B.html?height=' + height         // console.log(doc.documentElement.scrollHeight)          } };

　　

线上示例：http://snandy.github.io/lib/iframe/A.html