App内嵌套H5的那些事儿
以实战为线索,App 嵌套H5,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
Rkatsiteli
一个人的快乐,不是因为他拥有的多,而是计较的少!
展开
-
垂直菜单特效--移动端
垂直菜单显示收缩特效–移动端浏览器版并且实现去除点击事件300ms的阴影效果<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,use原创 2016-03-01 18:36:17 · 1184 阅读 · 0 评论 -
JS与Native交互
混合式开发1:(离线包,所有模块都存放在App的包中)将服务器的资源文件(CSS/JS/Html),存放到Android 的 assets资源目录下或者本地SD卡都行的,在WebView 中,首先开启支持JS功能插件//这个主要解决加载网页不跳转到系统浏览器webView.setWebViewClient(new WebViewClient());webView.setBackgroundColo原创 2017-01-18 19:13:49 · 1041 阅读 · 0 评论 -
↓↓↓ HTML如何局部滚动而头尾不滚动 ↓↓↓
HTML页如何局部滚动而整体不滚动解决方案1: 兼容 android(4.3版本 三星 note2)进行嵌套,没有引用任何插件,纯css。<html><head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta content="width=device-width,initia原创 2016-05-29 14:35:14 · 1247 阅读 · 0 评论 -
H5 项目实用
1、H5表单禁止复制、粘贴的方法禁止复制:<input type=text value="fdg" size=50 onselectstart="return false">禁止粘贴:<input type=text value="fdg" size=50 onpaste="return false">2、特殊链接(电话、发短信)如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhon原创 2016-07-22 19:38:59 · 3190 阅读 · 0 评论 -
三星(note2) 不支持H5的那些功能
有时候,部分手机不兼容CSS的各种属性,例如:1、三星 note2 (高度问题) native 嵌套h5之后 height 属性不起作用。 有时候,拿浏览器去测试,可能是没有任何问题的,但是嵌套之后,就不是那么回事儿了,各种问题,指定高度 height:50px; 的时候,根本bu 起任何的作用。解决方案:min-height: 45px;-webkit-logical-原创 2016-05-23 14:45:22 · 2301 阅读 · 0 评论 -
flipsnap(上下左右翻页功能)
相对于 swiper 插件来讲的话,页面功能不需要太强大的时候,这个比较轻便,如果你有时间的话,你可以做一个。 flipsnap的简单使用index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,原创 2016-09-14 14:03:41 · 679 阅读 · 0 评论 -
H5调用手机的摄像头拍照上传以及手机相册选取照片
H5调用手机的摄像头拍照上传以及手机相册选取照片语法: <input accept="audio/*|video/*|image/*|MIME_type">提示:如需规定多个值,请使用逗号分隔(比如 )。 详情访问:w3c 使用步骤:<input accept="image/*" type="file">目前支持情况是比较良好的,已在各大部分浏览器测试情况比较不错。但是,如果H5转载 2016-09-09 13:29:14 · 10493 阅读 · 0 评论 -
native 嵌套 h5(localstorage) 本地存储问题
native 嵌套h5 本地存储问题,按照正常逻辑来说(localStorage、sessionStorage),本是没有任何问题的。但是 native 嵌套之后,问题就出现了,就是localStorage/sessionStorage 存储值的时候出问题了,都会在native 端报 null,无法使用本地存储,难道是这样吗?难道不支持吗?顺间,你会感觉到一大堆的问题都在h5上。其实都是native原创 2016-05-11 17:20:32 · 4277 阅读 · 0 评论 -
如何实现语音识别功能
native 嵌套H5 实现语音识别功能?看图说话,我采用的是 mui 框架所自带的功能!代码附上:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>语音识别</title> <meta name="viewport" content="width=device-width,原创 2016-07-29 15:46:46 · 8554 阅读 · 4 评论 -
Native与H5交互-WebViewJavascriptBridge
native与H5的交互--WebViewJavascriptBridge原创 2016-02-02 11:50:45 · 1618 阅读 · 0 评论 -
移动页面滚动穿透解决方案(荐)
移动页面滚动穿透解决方法目前有多种解决方案,我介绍下几种方案: 解决方案1:阻止冒泡。//关键代码$(".sliders,.modals").on("touchmove",function(event){ event.preventDefault();}); 全部代码附上:<!DOCTYPE html><html> <head> <meta charset=原创 2016-05-06 17:30:47 · 13388 阅读 · 0 评论 -
浅谈锚链接(native 嵌套 h5)
native 嵌套 h5 的时候,总是有很多很多的问题,例如:锚点(锚链接)项目有个需求,在native嵌套 h5 的页面,要实现锚链接,想法挺好。代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta content="width=device-width,initial-scale=原创 2016-05-05 19:28:29 · 2690 阅读 · 0 评论 -
native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示
Native嵌套H5的那些事儿列表内容(1)native 的虚拟键盘弹出input 文本框上提及其置顶显示 解决方案1: 在各个的input输入框用<form></form>标签包起来例如: <form action=”javascript:void(0);”> <input /> </form>解决方案2: 在于你的布局,可以用定位position:fixed;原创 2016-02-01 18:11:40 · 9475 阅读 · 2 评论 -
移动端,点击之后某个区域后有阴影
移动端,点击之后某个区域后有阴影 今天偶然发现一件很奇怪的事儿。 在移动端,在我去掉css的伪类及其伪元素跟相关的js之后,在我点击某块区域的时候,总有一个背景盖在上面,当初以为是Js搞得鬼,后来发现却不以为然,原来是css的一个属性搞得鬼,希望可以帮到大家。如图所示,我所遇到的状况:原创 2016-03-01 10:38:59 · 14909 阅读 · 0 评论 -
移动浏览器点击事件的问题
大家都知道移动端的程序中,是没有点击事件的,只有 touchstart、touchmove、touchend。利用jquery这样写的话,也可以,但是当你点击按钮的单击事件时,将会等待大约300ms的时间。这是因为,浏览器是等着看,如果你是真正执行双击。如下代码所示,就会延时300ms:$("#sid").click(function(){ console.log(111);});p原创 2016-03-01 16:44:37 · 622 阅读 · 2 评论 -
h5获取pdf文件实现预览
native嵌套 h5实现 pdf 预览目前实现嵌套预览pdf的有很多种方法各种插件:http://www.open-open.com/news/view/1fc3e18/,这里我就介绍我要实现的功能 我需要native嵌套h5,实现*.pdf预览,而我的pdf,并不是本地的pdf文件,而是通过某服务器下发的http协议的pdf文件大致分为两种情况,你肯定会说 native为什么还要分为两种情况呢原创 2016-03-30 12:47:16 · 37484 阅读 · 0 评论 -
H5跨域请求
跨域请求有多种方案,就说说比较简单的几种方案吧解决方案1:也是比较简单直白的一种方式:利用Google Chrome浏览器来实现JavaScript跨域请求,降低安全级,window方式如下:。操作方法:找到Google Chrome浏览器图标,右击找到 “属性”中的“快捷方式”中的“目标路径地址”。加入到链接后面 –allow-file-access-from-files –disable-web原创 2016-02-02 15:50:03 · 8826 阅读 · 0 评论