前端
包含javascript和在做项目时碰见的一些前端问题整理
javaRoger
擅长电商领域和大数据应用,对高并发,高可用,高性能,高安全的系统搭建有一定理解,对平台治理和服务治理有一定了解,对技术有执着,懒人一个,喜欢偷懒,秉着能让机器做的,不要动手,所以喜欢各种通用设施的搭建,希望能把自己贡献给中台化,DDD建设,低代码和AICoding
展开
-
解决SELECT框中文字过长的方法
前几天在工作的时候,测试提了个BUG,我们的系统有很多的地方用的SELECT框把框中的信息给遮挡了,为了解决这个问题想了很多方法,一开始想弄一个横向的滚动条,可是网上给出的资料很少,于是想到用一个小TIP信息来提醒是不是也可以呢,所以写了以下的代码:var oP=window.createPopup();var oPopBody;function showTip(Sobj){ var Si原创 2009-06-16 15:34:00 · 5294 阅读 · 0 评论 -
如何解决日语中外字的问题
昨天接了一个调查任务,在特卖商品一览画面发现一个日语外字在页面上不能够正确显示,却在TEXT框中能正确显示,今天早上做了一早上调查,排除了数据问题,下午主要针对页面的显示问题,可是在喻绍祥的帮助下进展很小,当时在想这是不是一个解决不了的问题呢?然而经理一来听我们一叙述,就帮我解决了这个问题!下面介绍一下这个问题是如何被解决的!首先解释一下日语中的外字,它并不是外来字,准确的来说它是自己造的字原创 2009-06-02 10:17:00 · 1104 阅读 · 0 评论 -
实现在一个TABLE表中,保持表头不动,固定表头
//此式样将第一行一直保留在页面上,不随滚动条的移动而移动.Freezing_tdd { top:expression(document.getElementById(div-1).scrollTop-1); position:relative ; } 序号 企业名称 联系人原创 2009-09-22 13:30:00 · 5500 阅读 · 0 评论 -
Google开放API和开发者产品了解
谷歌把API的整理为元素周期表,简直是一个天才想法的。我决定以此为契机,把谷歌的产品线浏览一次。看看谷歌是如果布局其产品线,并如何为第三方开发者开放API的。目前就职于移动互联网行业,眼光自然首先就落在Mobile部分。浏览完以后发现谷歌并没有急于把传统优势的搜索产品导入到移动市场,而是在操作系统、位置相关应用和社交工具三方面导入,并通过广告分成激励第三方开发者。Google Mobile转载 2013-05-07 17:37:45 · 1863 阅读 · 0 评论 -
两分钟理解Fragment和Activity的生命周期
官网帮助文档链接: http://developer.android.com/guide/components/fragments.html主要看两张图,和跑代码一,Fragment的生命周 二,与Activity生命周期的对比 场景演示 : 切换到该Fragment11-29 14:26:35.095: D/转载 2014-09-29 11:28:12 · 748 阅读 · 0 评论 -
android项目中values中几个文件的作用
ids.xml——为应用的相关资源提供唯一的资源id。id是为了获得xml中的对象而需要的参数,也就是Object = findViewById(R.id.id_name)中的id_name。这些值可以在代码中用android.R.id引用到。若在ids.xml中定义了ID,则在layout中可如下定义@id/price_edit,否则@+id/price_edit。为什么使用id转载 2014-10-08 16:22:52 · 1037 阅读 · 0 评论 -
WEBP简介
WEBP是什么呢?WEBP 是google推出的意图改变web图片JPG、PNG、GIF三分天下局势的一种图片格式。它不仅支持无损或有损压缩、alpha通道,还支持动画演示。在同画质的情况下,webp格式图片占用体积相较于jpg图片大约减少40%,相较于无损png图片大约减少30%。具不完全统计,互联网流量中60%都产生于图片,如果能用上webp格式,网站的访问速度将会大大提升。兼容及转载 2015-09-28 13:53:36 · 2503 阅读 · 0 评论 -
User Agent中对应的参数意义
分析useragent会有很多信息,那么如何判断用户的浏览器呢,整理如下: `Mozilla` COMMENT 'Mozilla浏览器', `UCWEB` COMMENT 'UC浏览器', `MAUI` COMMENT 'MAUI浏览器,联发科技的,不支持js', `NokiaNos` COMMENT '诺基亚自带浏览器', `QQ` COMMENT 'QQ原创 2013-07-25 16:48:29 · 3278 阅读 · 0 评论 -
淘系webview中H5加载速度可集成标准
机型IOS低端机<= 2.5s原创 2019-04-04 14:47:40 · 303 阅读 · 0 评论 -
Android多语言支持以及各国语言Values文件夹命名规则
创建好的项目工程由于需求 需要做多国语言的支持 下面介绍怎么快捷的创建文件夹 建好一个android 的项目后,默认的res下面 有layout、values、drawable等目录这些都是程序默认的资源文件目录,如果要实现多语言版本的话,我们就要添加要实现语言的对应的资源文件。首先我们点击添加Android Xml File按钮,在Resource Type中选转载 2014-10-08 16:07:35 · 1649 阅读 · 0 评论 -
如何取得wap和web用户的真实IP
在移动互联网中,如何才能取得用户真正的IP呢,其实我们在header中可以得到的四个参数分别为REMOTE_ADDR ,HTTP_VIA ,HTTP_X_FORWARDED_FOR ,HTTP_CLIENT_IP,这四个参数意义如下:REMOTE_ADDR 是你的客户端跟你的服务器“握手”时候的IP。如果使用了“匿名代理”,REMOTE_ADDR将显示代理服务器的IP。原创 2013-07-23 10:10:40 · 4409 阅读 · 0 评论 -
Intellij IDEA开发第一个android应用教程
用惯eclipse的同学们可以试试通过Intellij IDEA来开发一个android应用。下面是具体的教程。首先:下载Intellij IDEA。最新版本是12。官方提供两个版本。一个是Community Edition,包含有android,javase的开发环境,是免费开源的。另一个是Ultimate Edition,收费的。可以试用30天。这里我下载的是Community Edi转载 2013-11-17 11:42:09 · 3329 阅读 · 0 评论 -
wap复杂不受控的网络环境下取IP的方法
1. 对网页真实网络环境分析理想情况下,若网络跟踪通行,那么所有的代理网关的IP都会被带到x-forwarded-for中,但目前看来很多网络中断了网络跟踪,所以x-forwarded-for中并不是完整的网络路径,故需针对网络进行header属性分析,希望能分析出真实IP的地址详细分析过程见附件《headers日志分析方案》,《headers分析》在手机网络中与IP相关的属性如下:原创 2013-12-23 18:15:03 · 2304 阅读 · 0 评论 -
webkit webApp 开发技术要点总结
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 :1. viewport:也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设转载 2013-03-21 15:29:27 · 1009 阅读 · 0 评论 -
HTTP Header 详解
HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议。HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应。就整个网络资源传输而言,包括message-header和message-body两部分。首先传递message- header,即http header消息 。http header 消息通常被分为4个部分:g转载 2013-12-23 18:28:32 · 1488 阅读 · 0 评论 -
开放api接口签名验证规则
为了保证数据在通信时的安全性,我们可以采用参数签名的方式来进行相关验证。案列分析我们通过给某 [移动端(app)] 写 [后台接口(api)] 的案例进行分析:客户端: 以下简称app后台接口:以下简称api我们通过app查询产品列表这个操作来进行分析:app中点击查询按钮==》调用api进行查询==》返回查询结果==>显示在app中上代码啦 -_-!一、不进行验证的方式a...原创 2019-11-22 15:23:44 · 1829 阅读 · 0 评论 -
关闭浏览器,清空SESSION
其实对于一个单独的页面是可以实现的.写下面一个方法: window.onunload = errorquit(); function errorquit(){ if(confirm("感谢使用后台管理系统!")){ window.location.href="loginOut.jsp"; } }loginOut.jsp session.invalidate(原创 2009-05-19 17:42:00 · 2942 阅读 · 0 评论 -
IE 6 图片<img/> 写入html ,图片不显示问题
图片html,如已经插入到页面中,但是图片没有显示,IE7,火狐等浏览器都正常,要右键-“显示图片”,图片才显示,很奇怪的。去搜了下,正好有位大哥遇到过类似的问题。他说搜国内的相关文章,都是一坨大鸟屎,最后靠国外文章解决,说几个吃饱了没事干的老外反复试验,发现转载 2011-09-28 22:13:23 · 2325 阅读 · 0 评论 -
JS navigator 对象
navigator是一个独立的对象,他用于提供用户所使用的浏览器以及操作系统等信息,以navigator对象属性的形式来提供。 --------------------------------------------------------------------------------属性名称 兼容性 返回内容appC转载 2009-05-13 13:21:00 · 928 阅读 · 0 评论 -
在Javascript中Eval函数的使用
【eval()函数】 JavaScript有许多小窍门来使编程更加容易。 其中之一就是eval()函数,这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。 举个小例子: var the_unevaled_answer = "2 + 3"; var the_evaled_answer = eval("2 + 3"); alert("the un-evaled answer is原创 2009-05-04 16:49:00 · 689 阅读 · 0 评论 -
DOM Node的基本属性在各个浏览器下的区别
上次开发时发现setUserData在火狐中用不了,详情请看http://blog.csdn.net/luo_yifan/article/details/6851774#comments,现在找到答案了 DOM Node节点对象是整个DOM中最主要的数据类型。节点对象代表了节点树中的一个单独的节点。这里说的节点可以是:元素节点、属性节点、文本节点以及所有在“Node types[节转载 2012-02-17 16:54:09 · 1131 阅读 · 0 评论 -
IE, FF, Safari前端开发常用调试工具
一些前端开发 IE 中的常用调试工具: Microsoft Script Debugger —— Companion.JS need to install this Companion.JS —— Javascript debugger for IE , like Console API feature IE Developer Toolbar —— Like Firebug (DOM/CSS etc) Fiddler —— Web Debugging Proxy HttpWatch —— HTTP vie转载 2011-02-11 16:52:00 · 3259 阅读 · 1 评论 -
iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari
Javascript代码:function iFrameHeight() {var ifm= document.getElementById("iframepage");var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;if(ifm != null &&转载 2011-10-25 09:55:08 · 2136 阅读 · 0 评论 -
chrome设置小于12px文字的方法
自Chrome27开始chrome正式取消了-webkit-text-size-adjust属性,所有字号最小为12px。但是由于开发的需求,咱们需要有些文字能小于12px,怎么办呢?如果希望设置为以前的9px效果,可以重新使用一个div包裹文字,并对此div使用:1234.webkit { font-size: 9px; -webkit原创 2013-08-22 19:43:28 · 1811 阅读 · 0 评论 -
IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别
<br />一、CSS HACK<br />以下两种方法几乎能解决现今所有HACK.<br /><br />1, !important<br /> 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<br /><style><br />#wrapper<br />{}{<br /> width: 100px!important; /**//* IE7+FF */<br /> width: 80px; /转载 2011-02-11 11:27:00 · 1534 阅读 · 0 评论 -
meta X-UA-Compatible 详解
X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含指令,都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循指令。对于多数网站来说,它是首选的兼容性模式。若要以IE7的引擎来渲染HTML页面则需在页面中添加如下原创 2014-03-06 12:04:39 · 1500 阅读 · 0 评论 -
html5基础与简介
一 什么是HTML51 HTML历史2 什么是HTML5 官方概念:HTML5草案的前身名为WebApplications 1.0,是HTML4的更新加强版本。它增加了新的标签和属性,强化了网页的标准、语义化、图像表达能力和交互效果。 广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,这些技术包括原创 2011-12-15 11:29:56 · 2805 阅读 · 0 评论 -
HTML5开发工具——进军HTML5
我们所说的HTML5开发工具,其实就是一个扩展(HTML5 Pack),它在 Dreamweaver 中添加对 HTML5 和CSS3 的支持。本文简要概述HTML5开发工具的安装,并且提供HTML5开发工具的相关软件和文件的下载,以及安装这个扩展之后在 Dreamweaver 中可以使用的新特性。HTML5 Pack 具有多个版本,对应于Dreamweaver的多个版本,本文以 HTML5转载 2011-12-28 14:21:35 · 4325 阅读 · 2 评论 -
kindeditor保存到数据库数据被转义,但在页面上又被解析出来
在做XSS的安全校验的时候,发现通过kindeditor,保存在数据库中是被转义的字符 例如:<svg onload="alert(/XSS/)"></svg>被转义成&lt;svg onload="alert(/XSS/)"&gt;&lt;/svg&gt;但是在页面上编辑的时候,重新通过kindeditor渲染后,...原创 2018-09-12 11:32:17 · 3675 阅读 · 0 评论 -
WEB开发中合理选择图片格式
从某种程度上说,判断一个网页设计师是否优秀,可以从其在WEB开发(或网页设计)中是否合理的采用各种图片格式得出结论。事实上,或许所有人都知道图片存在GIF,JPG和PNG等格式,但并非所有人都知道它们之间的具体区别和使用技巧。接下来,代码吾爱将给大家介绍:WEB开发中几种最受欢迎图片格式的前世今生以及如何正确的使用它们。1.JPEG?JPEG格式是一种大小与质量相平衡的压缩图片格式。通转载 2012-11-07 11:18:29 · 700 阅读 · 0 评论 -
那点你不知道的XHtml(Xml+Html)语法基础(DTD、XSD)
什么是XHtml:摘录网上的一句话,XHTML就是一个扮演着类似HTML的角色的XML。XHtml可当模板引擎应用:CYQ.Data 框架里有一套XHtmlAction模板引擎, 应用在QBlog开源博客里。简单说,把Html当Xml进行Load加载,再使用常规的Xml语法就可以对模板进行增删改查等操作。为啥不是Html,而是XHtm转载 2013-09-24 16:28:48 · 1230 阅读 · 0 评论 -
A的href和onclick
在a标签的href与onclick中使用javascript的区别⒈ 链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接);⒉ 假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值;⒊ 如果页面过长有滚动条,且希望通过链接的 o转载 2013-02-01 11:54:33 · 1316 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示:最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。userD原创 2014-04-01 10:48:23 · 2329 阅读 · 0 评论 -
HTML5学习网站收集
HTML5工作室 http://www.html5area.com/HTML5中国 http://www.html5cn.org/HTML5中文学习 http://www.html5cn.com.cn/非常全面,特性明显的HTML5介绍 http://www.w3school.com.cn/html5/html_5_intro.asp原创 2014-01-06 10:29:46 · 917 阅读 · 0 评论 -
FreeMarker和siteMesh简析
FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用程序虽然FreeMarker具有一些编程的能力,但通常由Java程序准备要显示的数据,由FreeMarker生成页面,通过模板显示准备的数据(如下图) SiteMesh 是一个网页布局和修饰的框架,利用转载 2014-04-17 09:21:07 · 1544 阅读 · 0 评论 -
HTML字符实体(Character Entities),转义字符串(Escape Sequence)
为什么要用转义字符串?HTML中,&等有特殊含义(,用于链接签,&用于转义),不能直接使用。这些符号是不显示在我们最终看到的网页里的,那如果我们希望在网页中显示这些符号,该怎么办呢?这就要说到HTML转义字符串(Escape Sequence)了。转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中,定义转义字符串的原因有两个:第一转载 2014-05-07 09:07:33 · 1963 阅读 · 0 评论 -
meta标签viewport详解
1.什么是Viewport手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport转载 2013-12-05 16:09:36 · 3137 阅读 · 0 评论 -
移动webapp注意问题
一、页面head头部的meta声明针对移动设备的特性,在head标签内需要添加一些特殊的声明。1、viewportviewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像转载 2013-12-04 18:47:37 · 2329 阅读 · 0 评论 -
HTML 转义字符
HTML 转义字符诸如 “为了在 HTML 中显示小于号 (字符实体一些字符在 HTML 中拥有特殊的含义,比如小于号 (字符实体有三部分:一个和号 (&),一个实体名称,或者 # 和一个实体编号,以及一个分号 (;)。要在 HTML 文档中显示小于号,我们需要这样写:< 或者 <使用实体名称而不是实体编号的好处在于,名称相对来说更容易记忆。而转载 2017-03-09 13:37:15 · 738 阅读 · 0 评论 -
freemarker 数字格式化
reemarker数字格式化可以在两个地方设置,一个是全局的,即在freemarker.properties文件中设置number_format,还有一个是使用string指令来控制数据的输出格式。例如:${num?string(‘0.00’)} 如果小数点后不足两位,用 0 代替${num?string(‘#.##’)} 如果小数点后多余两位,就只保留两位,否则输出实际值 输出为:12397转载 2017-07-06 16:35:55 · 1062 阅读 · 0 评论