JH0610Y的专栏

原创 H5页面在某些手机自带浏览器后退不刷新的问题

在一个项目里，点击首页头像，跳转登录页，登录完成后自动后退上一页并刷新。此时用到的代码是：window.history.back();这个后退上一页dai代码，当时测试不全面，只在部分手机浏览器上测试通过，所以并没有发现不妥，后来，同事偶然发现在华为p30手机自带浏览器上，登录后退后，数据不同步的问题。经过一番查询，发现了一个新的有效代码：window.location.href=document.referrer;这个亲测，有效。...

原创 关于H5页面唤起app小记

纯属摸索记录。平时也遇到过这样的需求，虽然实现了，但是感觉不完美，所以，工作之余搜索发现了他人的‘先进’实现方法，于是实验一番，感觉不错。用到的插件为：callapp-lib地址：https://github.com/desandro/imagesloaded具体用法大家去看一下文档，说的很清楚。我这里只是简单测试了一下。var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //andro

原创 video.js 实现m3u8格式视频 亲测有效果

作为总结，记录一下。代码不全贴了，只选择重要部分：1、引入css文件，js文件video-js.cssvideo.jsvideojs-contrib-hls.min.js我看有些文章说不能播放 跟video.js版本有关系，呵呵，反正我是没有遇到这个问题。videojs-contrib-hls.min.js自行去下载。2、html部分<video id="mVideo" class="video-js vjs-default-skin vjs-big-play-

转载 css实现超出几行省略并...

1、单行word-break: break-all; overflow:hidden; // 超出的文本隐藏 text-overflow:ellipsis; // 溢出用省略号显示 white-space:nowrap; // 溢出不换行2、多行word-break: break-all;overflow:hidden; // 超出的文本隐藏text-overflow:e...

原创 快应用web组件加载网页如何与网页通信

快应用不多详述。在快应用里，web组件加载网页如下：&lt;template&gt; &lt;div class="doc-page"&gt; &lt;web id="web" class="web-page" trustedurl="{{trust}}" src="{{webUrl}}" onpagefinish="onPa

原创 Hbuilder如何连远程接服务器上传代码

1、打开Hbuilder编辑器，菜单-工具-插件安装-选择FTP-安装2、在自己项目右键-部署-运行web部署向导-选中FTP/SFTP/FTPS-下一步，按要求填写相关信息，最后确定。

转载 web前端如何优化

转自：http://blog.youkuaiyun.com/mahoking/article/details/51472697

转载 浅谈web缓存

转自：http://www.alloyteam.com/2016/03/discussion-on-web-caching/#prettyPhoto

转载 link与@import的区别

在HTML中引入CSS的方法主要有四种，分别是行内样式、内嵌样式、链接样式、导入样式，其中外部引入的两种就是链接样式和导入样式，也就是link和import。1、示例XML/HTML代码 XML/HTML代码 @import url("CSS文件"); 2、区别a、link属于html标签，除了引入css样式外还可以定义RSS等其他事务，@import

转载 js作为一种弱类型语言，它的优缺点

1、优点：a、js减少网络传输在js出现之前，传统的数据提交和验证工作均是由客户端浏览器通过网络传输到服务器上进行，如果数据量很大，这对于网络和服务器的资源来说实在是一种无形浪费，但使用js就可以在客户端就行数据验证。b、js方便操纵html对象。js可以方便的操纵html页面中的对象，用户可以使用js来控制页面中各个元素的外观、状态、甚至运行方式。c、js支持分布式运算。

转载 js中的call()和apply()

面试时两次遇到这个问题，第一次不会，回来查查资料知道了大概，没想过几天再次见到，依旧不会，我这脑子，所以，这次自己查资料看高手的总结，在这记录一下：1、call()方法定义：a、定义：调用一个对象的一个方法，以另一个对象替换当前对象。语法为call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 。b、说明：call方法可以用来代替另一个对象调用一个方法

转载 web前端的跨域问题

所谓跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。例如以下常见的：1、http://www.wenzehun.com/index.html 调用 http://www.wenzehun.com/server.PHP 这种情况是不跨域的2、http://www.wenzehun.com/index.html 调用

原创 html空元素

去面试时被问到html有哪些空元素，一脸懵逼，回来后百度搜查一番，内心哦的一声，soeasy！所谓空元素就是指那些内容的html元素，且空元素是在开始标签中就关闭的,例如.经过汇总以下这些都是空元素：

原创 angularjs+bootstrap 写轮播效果

因为项目中有需要轮播效果，所以，百度一下，发现不少案例，但是，实际用了几个，虽然可以，但是angularjs版本太低，换成新版本的angularjs就不行啦。所以，无奈，只能自己动脑动手去写了：1、html部分 2、js部分因为要用到$sce,所以要在controller里面加上 function newIndexCtrl($scope, $rootScope, $http, $win

原创 基于angularjs的瀑布流插件angular-waterfull.js

最近的项目中，是用angularjs写的，领导要求，其中的效果都用angular去写。这不，对接数据后就遇到问题啦，关于瀑布流的问题。之前是用的masonry.js这个插件，这个插件也很好，但是在与后台对接后，布局就乱了，我是百思不得其解，为什么对接前好好的，对接后就不行啦。。。后来就找呀找，也试了很多其他插件，虽然都是打着angularjs的名义，但是个人试用了几个，没有效果

原创 angularjs和angular-cookies 设置cookie的过期时间

最近的项目中用到angularjs，因为很多不熟悉，用起来有点困难。这不，今天就遇到了要设置cookiede 过期时间的问题。通过查找资料，解决办法如下：首先引入js文件，如下：angular-cookies.min.js对于初学者或者初次用angularjs的人来说，是非常好的一个插件，它里面封装了存cookie、读取cookie、删除cookie的方法，这几

原创 bootstrap+masonry.js写瀑布流

最近在用bootstrap写一个网站，其中有个图文展示的页面要用到瀑布流的效果。因为项目要求，项目要以bootstrap为基准，不准私自添加内联样式、内部样式，所以，自己写瀑布流就不行了，所以，根据要求，百度查找相关资料，看到masonry.js.个人认为这是一个非常好用的瀑布流插件。下面说一下我在引用的过程中遇到的问题，一开始我用bootstrap栅格系统布局，代码如下

原创 关于图片加载问题

今天要解决一个图片加载完成之前显示loding图片的问题，开始我试了常用的几种方法，但是完全不达标。很苦恼，旁边还坐着大师，心里也很忐忑。后来实在解决不了，只能求助大师，一语点破。写两个img标签，一个显示loding图片，一个显示要加载的图片。后者加上onload事件。onload事件执行一个函数，这个函数就是loding图片在图片加载未完成之前显示，完成后隐藏。针对问题，这个办

转载 如何把base64转成图片

先从视频流中截取图片，转成base64码；function CatchCode() {  var canvans = document.getElementById("canvas");  var imgData = canvans.toDataURL();var base64Data = imgData.substr(22);$("#newimg").attr("src",i

转载 js获取当前时间戳

第一种： var timestamp = Date.parse(new Date());第二种： var timestamp = (new Date()).valueOf();第三种： var timestamp = new Date().getTime()；

转载 常用meta汇总

1、viewport即可视区域，对于桌面浏览器而言，viewport指页面除去所有工具栏、状态栏、滚动条等之后的区域。为了兼顾在传统web页面和webapp上都有良好的显示效果，viewport还有以下几种属性值可以设置：width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）height: viewport 的高度 （范围

转载 如何用JavaScript在浏览器端获取图片的原始尺寸大小？

今天在网上 冲浪时，看到一篇文章，我只选择主要的粘下来，留作后用：var img = $(“#img_id”); // Get my img elemvar pic_real_width, pic_real_height;$(“<img/>”).attr(“src”, $(img).attr(“src”)).load(function() {pic_real_wid

转载 判断浏览器类型

<script language="JavaScript">   functiongetOs()  {      varOsObject = "";     if(navigator.userAgent.indexOf("MSIE")>0) {          return"MSIE";     }     

转载 浏览器各种宽、高

原创 准确取得当前滚动条的位置

准确取得当前滚动条的位置，正确的使用方法是：      document.documentElement.scrollTop：垂直方向     document.documentElement.scrollLeft：水平方向

原创 获取键盘的值

由于在做项目的时候，用到这些，所以从网上找了，自己发篇文章保存起来，以待后用：keycode     8 = BackSpace BackSpacekeycode     9 = Tab Tabkeycode    12 = Clearkeycode    13 = Enterkeycode    16 = Shift_Lkeycode    17 = Contro

原创 清除谷歌默认表单背景色

input:-webkit-autofill,    textarea:-webkit-autofill,    select:-webkit-autofill {        -webkit-box-shadow: 0 0 0 1000px white inset;    } 这是我一个交流群主【建站呀】群主 三日兄分享的方法

原创 js处理backspace和enter键

//处理键盘事件   function do(e) {       var ev = e || window.event; //获取event对象                 if (ev.keyCode == 8) {alert("2")           return false;       }       if (ev.keyCode == 13) {

原创 阻止事件冒泡方法

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码，但有时候我们又不希望事件冒泡。这个时候就要阻止jQuery.Event冒泡。以下提供两种方法参考：1、jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：event.stopPropagation();2、一个更简单的方法阻止事件冒泡：return

原创 jq写点击指定div以外的其他地方隐藏此div

// 点击空白隐藏花瓣$("*").bind("click",function(e){var target=$(e.target);if(target.closest(".leaf").length == 0){$(".leaf").show();$(".leaf_b").hide();}})

原创 js、jq怎么控制文本框只能输入数字

$(".note").blur(function(){ var s=$("#note").val(); var reg = new RegExp("^[0-9]*$"); if(!reg.test(s)){ alert("请输入数字"); } });

原创 网站添加ico图标添加方法

1.首先要先制作图标2.其次转换成ico格式图标，命名为favicon.ico,并将此文件放在根目录之下（在线转成ico格式文件网站：http://www.bitbug.net/）3.然后在head标签里 添加此行代码：

原创 div添加contenteditable属性

div标签加上此标签后，contenteditable="true"可转变为文本可编辑转态。

原创 有关浏览器几种宽高的汇总

浏览器时下窗口可视区域高度$(window).height()浏览器时下窗口文档的高度$(document).height()浏览器时下窗口文档body的高度$(document.body).height()浏览器时下窗口文档body的总高度 包括border padding margin$(document.body).outerHeight(