[TOC]
## 前言
本文主要总结了一些线上文档的实用技术,后面陆续会根据实际需求将不同的技术进行分类或者归到兼容文档里。
## 技术点如下
### 屏蔽鼠标右键
方案:oncontextmenu=”window.event.returnValue=false”
### 取消选取、防止复制
方案:onselectstart=”return false”
### JS不允许粘贴
方案:onpaste=”return false”
### JS防止复制
方案:oncopy=”return false;” oncut=”return false;”
### 可以在收藏夹中显示出你的图标
方案:< link rel=”Bookmark” href=”favicon.ico”>
### 关闭输入法
方案:< input style=”ime-mode:disabled”>
### 防止被人 frame
方案:
~~~
< script >
if (top.location != self.location)top.location=self.location;
< /script>
~~~
### 网页将不能被另存为
方案:< noscript>< iframe src=*.html>< /iframe>< /noscript>
### 查看网页源代码
方案:< input type=button value=查看网页源代码 onclick=”window.location = “view-source:”+ “http://www.pconline.com.cn””>
### 光标是停在文本框文字的最后
方案:
~~~
< script language=”javascript”>
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart(“character”,e.value.length);
r.collapse(true);
r.select();
}
< /script>
< input type=text name=text1 value=”123″ onfocus=”cc()”>
~~~
### 网页不会被缓存
方案:
~~~
< META HTTP-EQUIV=”pragma” CONTENT=”no-cache”>
< META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache, must-revalidate”>
< META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>
或者< META HTTP-EQUIV=”expires” CONTENT=”0″>
~~~
### 怎样去掉图片链接点击后,图片周围的虚线
方案:`< a href=”#” onFocus=”this.blur()”>< img src=”logo.jpg” border=0>< /a>`
### 如何设定打开页面的大小
方案:
~~~
< body onload=”top.resizeTo(300,200);”>
//打开页面的位置
< body onload=”top.moveBy(300,200);”>
~~~
### ENTER 键可以让光标移到下一个输入框
方案:`< input onkeydown=”if(event.keyCode==13)event.keyCode=9″>`
### 各种样式的光标
方案:
auto :标准光标 ;default :标准箭头 ; hand :手形光标; wait :等待光标; text :I 形光标; vertical-text :水平; I 形光标;
no-drop :不可拖动光标 ; not-allowed :无效光标 ; help :?帮助光标 ; all-scroll :三角方向标; move :移动标; crosshair :十字标;其他:
e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize
### 在规定时间内跳转
方案:`< META http-equiv=V=”REFRESH” content=”5;URL=http://www.51js.com”>`
### 将彻底屏蔽鼠标右键
方案:oncontextmenu=”window.event.returnValue=false”
### ie与其他浏览器的区别
解析:在获取属性,ajax请求,事件坐标,透明的写法,阻止冒泡等均是不同的。
参考资料:[ie与其他浏览器区别](http://blog.csdn.net/a464064368/article/details/71436539)
### web应用向前端推送数据的方式
* js
* Commet:基于HTTP长连接的服务器推送技术
* 基于WebSocket的推送方案
* SSE(Server-Send Event):服务器推送数据新方式
方案:oncontextmenu=”window.event.returnValue=false”
### 实现文本缩进
方案:text-indent 可以实现文本的缩进
### 将彻底屏蔽鼠标右键
方案:oncontextmenu=”window.event.returnValue=false”
### java根据html代码生成pdf文件
方案:参考代码
~~~
public void createPdf() throws Exception {
// step 1
String inputFile = "index.html";
String url = new File(inputFile).toURI().toURL().toString();
String outputFile = "index.pdf";
System.out.println(url);
// step 2
OutputStream os = new FileOutputStream(outputFile);
org.xhtmlrenderer.pdf.ITextRenderer renderer = new ITextRenderer();
renderer.setDocument(url);
// step 3 解决中文支持
org.xhtmlrenderer.pdf.ITextFontResolver fontResolver = renderer
.getFontResolver();
fontResolver.addFont("c:/Windows/Fonts/simsun.ttc", BaseFont.IDENTITY_H,
BaseFont.NOT_EMBEDDED);
renderer.layout();
renderer.createPDF(os);
os.close();
System.out.println("create pdf done!!");
}
~~~
### 加载https协议的文件
大家在使用原始方式载入脚本或者样式文件的时候,一般cdn的建议方式是https的,但我们的应用协议不一定是https的,这种时候使用// ,会自动识别当前页面适合的协议,如果你强行使用https就会报错或者很慢
## 参考文档
* [值得收藏的js实用技术](http://mp.weixin.qq.com/s/yT3YPpAVCR9RTS1lfQDQCw)
- 前端入门
- 前端入职须知
- 入职准备
- 前端ide
- vsc快速上手指南
- 上手指南一
- 常用插件推荐
- 微信开发者
- sublime的使用
- hbuilder入门
- ws
- 前端面试
- 概要
- bat面试题库
- 题库一
- 面试大纲
- 题库二
- 面试大纲
- 前端基础面试题
- js基础面试题
- vue&&react面试题
- 数据结构&&算法面试题
- 题库三
- 001
- 题库四
- 中小公司leader
- 常规题库
- 前端规范
- 001
- css
- 001
- 002
- es6(js)
- 001
- 002
- 003
- 004
- node
- 001
- vue
- 001
- react
- 001
- 预处理器
- 001
- gulp
- 001
- webpack
- 001
- 设计模式
- 001
- web常识
- 001
- koa
- 001
- 小程序
- 001
- 数据结构与算法
- 001
- 推荐文章
- 面试指南
- web性能
- 面试分享
- 001
- ps
- ps入门阶段
- 图片类型以及区别
- 基本概念以及常用工具
- ps操作技巧
- 几个问题
- ps互动教程软件(app)
- 资源导航
- ps站点资源导航
- ui站点导航
- html
- h5专题
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- async&&defer
- fileApi
- h5调用底层能力
- input新解
- canvas实战篇
- 教程
- js
- javascript入门
- js代码审查工具
- js性能优化
- 浏览器dom对象
- js优质资源
- indexDB入门
- jquery
- jq基本语法
- jq插件与原生插件
- Jq使用建议
- ajax后退解决方案
- jq常见问题
- js常用技术
- js控制运动-move.js
- 常用正则归纳
- js实用技术
- 鼠标行为分析
- document.referrer
- 你可能不知道的调试技巧
- 表格文件的读取与下载
- 异步编程那些事
- 数据结构
- 编程环境和模型
- 列表
- 栈
- 队列
- 链表
- 字典
- 散列
- 集合
- 二叉树和二叉查找树
- 参考
- js编程
- js模块机制
- 算法
- 基本算法
- 递归
- 图和图算法
- 图定义
- 系统建模
- 图类
- 搜索图
- 查找最短路径
- 拓扑排序
- 图实践
- 排序算法
- 测试平台
- 冒泡排序
- 选择排序
- 插入排序
- 基本排序的比较
- 希尔排序
- 归并排序
- 快速排序
- 实践
- 二分排序
- 检索算法
- 顺序查找
- 二分查找
- 查找文本数据
- 检索实践
- 高级算法
- 动态规划
- 贪心算法
- 高级算法实践
- 代码重构
- 简化函数参数
- 001
- 002
- 基础巩固
- 001
- es2015实战
- 初识es-module
- 异步编程
- es6工厂函数
- filter|map|reduce
- js实战篇
- 前端图像处理
- touch事件知多少
- 手势与实践
- print表格分页
- 精彩文章推荐
- 001
- 插件库
- 插件大全
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 视频控件
- 发送浏览器通知
- 触屏签名插件
- 图片相关插件推荐
- 待分类插件(pc)
- 待分类插件(手机端)
- 交互组件
- layerjs
- web
- web兼容
- pc端兼容bug汇总
- ie兼容bug汇总
- ie8测试专题
- web常用技术点
- web兼容汇总001
- ie6专题
- css兼容
- web安全
- web安全初级
- app/h5组件
- app教程
- 前端教程
- rubikx的教程
- 与app交互逻辑
- h5唤起app通识
- webview专题
- webview总纲
- js与oc交互协议
- js与安卓交互协议
- 兼容问题汇总
- jsBridge专题
- errorBook.js
- 常用工具
- chrome-devtool使用
- chraels
- 开发注意事项
- web常识
- markdown教程
- 自定义风格思路
- 经验与问题总结
- 总结1
- 前端应该注意哪些seo
- 懒加载和预加载
- https
- 前端重构
- web优化
- 移动端web优化
- http缓存
- web端优化
- 图片专题
- svg专题
- 深入浅出svg
- 地图使用
- 注意事项
- 需求提交
- 常规交互需求提交
- 缓存
- 干货文章
- 浏览器缓存
- 内存
- web性能指南
- 读书笔记
- ui框架
- 概论
- easyui
- bootstrap
- 入门推荐
- modal插件使用
- 按钮组件
- 正确使用栅格布局
- 下拉框插件使用
- 表单使用与验证
- tab切换项插件
- 分页控件
- 进度条控件
- 文件上传控件
- 面板控件
- 常见特效与插件
- weui
- sui-pc
- sui-mobile
- layerUI
- frozen-UI
- rubik-u那些事
- 基本内容
- 小程序
- 小程序入门
- 入门
- 实践踩坑
- 001
- 基本语法
- 开发大纲
- 注意事项
- 微信专题
- 基本入门
- 准备工作
- 定制菜单
- 图文消息与图文推送
- h5支付
- 公众号支付
- node完成微信支付
- 进阶使用
- 微信分享
- weui使用
- 基本使用
- 支付宝专题
- 支付宝h5支付
- app支付接入
- 服务窗支付
- java
- java入门
- eclipse基本使用
- 语言特点
- java代码规范
- 编译调试
- java基本语句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- 常用常识
- 常用常识2
- 部署项目
- web --xml文件解析
- java生成pdf文件
- java读取、写文件案例
- 图片加水印
- 图片加水印2
- java-cookie
- 验证码文件
- sql-mapper语法
- maven教程
- mySql教程
- jeecms
- flash
- flash入门
- flash准备工作
- 运行与编译
- 浏览器中flash设置教程
- flash检测