web常用技术点 · 前端技术指南

[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)