h5页面

window.history.go(-1) 和 window.history.back(-1) 都用了，安卓会刷新，IOS系统不刷新（IOS会读取浏览器缓存） 下面用了一种比较low的方法，但是好歹实现了。。 //home.html localStorage.setItem('homeHref',window.location.href); location.href = "./detail.html"; 在详情页, 后面加了一个随机数，是防止IOS读取浏览器缓存 //detail.html location.href= window.localStorage.getItem('homeHref')+"&tmp="+Math.random(); 浏览页面的时候，如果跳往其他页面，然后返回上一页，有时候并不会刷新（应该是缓存机制的原因），此时我们可以通过添加一段 js 代码强制刷新页面。 window.onpageshow = function (event) { if (event.persisted) { window.location.reload(); } } onpageshow 事件在每次加载页面的时候都会触发，而 event.persisted 则用于判断页面是否从缓存中读取，若是则为 true 。 来源： https://blog.csdn.net/qq

苹果在iOS 8中推出了 WKWebView ，这是一个高性能的 web 框架，相较于 UIWebView 来说，有巨大提升。本文将针对 WKWebView 进行简单介绍，然后介绍下如何和 JS 进行愉快的交互。还望各位大佬不吝赐教。 本文分为两大部分 WKWebView 简单介绍 JS 交互 1 WKWebView 就目前移动开发趋势来说，很多 APP 都会嵌套一些 H5 的应用。H5 有一些 Native 无法比拟的优势，例如：更新快，不用发版，随时上线等等。然而在 iOS 中， UIWebView 是及其难用的。随着 iOS 8 的推出，Apple 重构了 UIWebView，于是 WKWebView 横空出世。 1.1 WKWebView VS UIWebView 根据官方文档，我们来简单对比一下 UIWebView 和 WKWebView，看看这两个到底有什么区别 WKWebView UIWebView 内存占用 小 大 且有内存泄漏 加载速度 快 慢 与 JS 交互 易 难 （可与 JSCore 配合） 帧率 60FPS 掉帧 从文档来看，二者区别还是很明显的，但到底区别有多大的，我们用数据说话。打开京东，网易，新浪这三个网站，从打开时间和占用内存上来比较一下，看谁能胜出。该测试在 2015款 MBP 上打开，使用 Xcode 9 GM 版，在 iPhone 8

小程序webview实践 -- 张所勇 大家好，我是转转开放业务部前端负责人张所勇，今天主要来跟大家分享小程序webview方面的问题，但我并不会讲小程序的webview原理，而我主要想讲的是小程序内如何嵌入H5。 那么好多同学会想了，不就是用web-view组件就可以嵌入了吗，是的，如果咱们的小程序和H5的业务比较简单，那直接用webview接入就好了，但我们公司的h5除小程序之外，还运行在转转app、58app、赶集app等多个端，如何能实现一套代码在多端运行，这是我今天主要想分享的，因此今天分享更适合h5页面比较复杂，存在多端运行情况的开发者，期待能给大家提供一些多端兼容的思路。 下面我先跟大家介绍下今天演讲主要的提纲。 小程序技术演进 webview VS 小程序 h5多端兼容方案 小程序sdk设计 webview常见问题 1 转转小程序演进过程 相信在座的很多同学的产品跟转转小程序经历了类似的发展过程，我们转转小程序是从去年五月份开始开发的，那时候也是小程序刚出来不久，我们就快速用原生语法搭建了个demo，功能很简单，就是首页列表页详情页。 然后我们从7月份开始进入了第二个阶段，这时候各种中大型公司已经意识到了，借助微信的庞大用户群，小程序是一个很好的获客渠道，因此我们也从demo阶段正式的开始了小程序开发。 那时候我们整个团队从北京跑到广州的微信园区里面去封闭开发

移动布局 1. 移动设备 手机 和 ipad 安卓系统 ios 系统 安卓系统 内置浏览器是谷歌 ios 内置 safari 浏览器 他们的内核都是 webkit ，不考虑兼容性，需要考虑的是安卓和 ios 的区别。 2，布局 设备宽度 设备的实际大小 设备的分辨率 厂家给的 页面的大小 设计稿上的大小 浏览器的视口 浏览器自带的用 document.documentElement.clientWidth 查看， 在移动设备上如果不做视口处理一般默认是 980 ， 例子 设备宽是 320 页面宽是 1200 浏览器视口是 980px 三种不统一，我们用移动设备看页面，浏览器的视口会自动缩小，以 100% 完整展示页面，就会变的不清楚，特别挤。我们需要把这三个变的统一。 移动设备宽（ 320 ）和浏览器视口（ 980 ）宽一致 在 head 之间加一个 meta 标签 name= ”viewport” <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 设备宽度和浏览器视口一致时 如果页面宽大于这个数字，就会出现滚动条。 2. 当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽

HTML5简介 HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记，而不同的HTML标记能表示不同的效果。（简单的说HTML是超文本标记语言） HTML5 草案的前身名为 Web Applications 1.0 ，于2004年被 WHATWG 提出，于2007年被 W3C 接纳，并成立了新的 HTML 工作团队。 如果从狭义的角度来讲， HTML5 就是 HTML4 的新一代产品。 而如果从广义的角度来讲，则是 新一代的富客户端解决方案 。 1. HTML到HTML5 元素的标签名大小写混杂的情况。 元素没有合理结束的情况。 元素中使用了属性，但没有制定属性值的情况。 为元素的属性制定属性值时没有使用引号。 2. HTML5的优势 支持Html5的浏览器包括 Firefox （火狐浏览器）， IE9 及其更高版本， Chrome （谷歌浏览器）， Safari ， Opera 等；国内的 遨游浏览器（ Maxthon ），以及基于 IE 或 Chromium （ Chrome 的工程版或称实验版）所推出的 360浏览器 、 搜狗浏览器 、 QQ浏览器 、 猎豹浏览器 等国产浏览器同样具备支持HTML5的能力。 需要注意的是，虽然很多浏览器目前已经能够支持 HTML5 ，但是显示效果仍旧存在差异性。这时，我们如果从样式的角度出发，可以采用下面的几种

1、ios移动端 软键盘收起后，页面内容被顶上去，不下滑回原处 代码如下： $(function(){ $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function(){ window.scroll(0,0); }); }) 原理就是弹起键盘的时候，window.scrollY会从0变到键盘的高度（例如：200），当输入框焦点失去后让scrollY回到0就好了。 但是有一个很严重的问题：如果页面上有按钮需要操作 ，例如，评论的输入框+发布按钮，输入完文字，点击“发布”，触发click事件的时候，会导致页面先触发blur事件，键盘回落，然后一切就结束了。。。。按钮点击没有起任何作用。 解决方案： 把click事件更换成ontouchstart 可以解决这个问题。 ontouchstart 事件优于click事件触发。 2、移动端 input,按钮等样式在安卓与ios上不同的解决方案 input,select,button{ 　　-webkit-appearance:none; 　　appearance:none; } 去掉 IOS默认样式即可 3、IOS上下拉动滚动条时卡顿、慢 body { -webkit-overflow-scrolling:

上个星期，项目需求是在公司服务器上放些视屏，通过二维码或链接分享出去，让客户访问。本来是一个很简单的东西，我首先想到的是H5的video 标签。这个标签已经被大多数主流浏览器支持 ( PC端的Chrome，安卓端浏览器，微信浏览器，QQ浏览器(自带播放器)，以及IOS的safari都支持h5的video标签 ) ，而且使用简单。 在写好了页面以后，我拿了项目中的一个格式为mp4的视屏开始测试，发现在浏览器和安卓手机上是可以播放的，只是不能快进，但在苹果手机上没有反应。于是我把视屏用格式工厂转为 h264/aac , 发现还是不能播放。网上说是ios对视屏的限制， <audio>``<video> 必须由用户动作触发，不能自动播放。于是绑定监听事件，当客户触发了点击时在播放，发现在苹果手机上还是毫无反应，又去引用网上的插件video.js 还是不行。在一次又一次尝试中，我让公司后台在 需要服务器配置一些东西,发现终于能播放了 。当时真是激动的想哭。好吧，废话到这里，下次直接上代码 。 来源： https://www.cnblogs.com/yufeiyu/p/9384634.html

ionic 是一个强大的 HTML5 应用程序开发框架 但由于APP反复上下架所带来的时间及审核问题以及部分不足以影响APP整体功能的更新 通过在IONIC中嵌入H5页面解决 同时H5页面也可以通过浏览器访问，从而实现一端多用 来源： https://www.cnblogs.com/chendongbky/p/11413982.html

# coding=utf-8 from appium import webdriver import time from selenium.webdriver.support.wait import WebDriverWait desired_caps = { 'platformName': 'Android', 'deviceName': 'TUKDU12122011111', 'platformVersion': '7.0', # apk包名 'appPackage': 'com.baoneng.bnmall', # apk的launcherActivity 'appActivity': 'com.baoneng.bnmall.ui.SplashActivity', # 'automationName': 'uiautomator2' } driver = webdriver.Remote('http://127.0.0.1:4723/wd/hub', desired_caps) time.sleep(3) driver.find_element_by_name('分类').click() time.sleep(3) driver.find_element_by_name('味聚特学生下饭菜93g').click() driver.implicitly_wait(6)

作为一名H5初学者，有幸在这里与大家分享一些小知识！当然，如果想成为一名大神级别的前端工程师，需要具备HTML5，CSS3,Jquery,JavaScript，等前端语言，还需要一定的基础架构，Vue.js， Angular.js，React，Bootstrap等，现在先从最基本的学起！ 一：常用编辑器 Webstom、Dreamweaver、HBuilder、Sublime Text、WebStorm、Intellij IDEA等。 二：HTML 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言，不是一种编程语言，而是一种 标记 语言！ 三：HTML发展史 版本 年份 描述 HTML 1991 第一版的html HTML＋ 1993 作为互联网工程工作小组（IETF）工作草案发布（并非标准） HTML2.0 1995 作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML3.2 1997 作为W3C推荐标准 HTML4.01 1999 （比上一版做了微小改进）作为W3C推荐标准 XHTML1.0 2000 发布于2000年，是W3C推荐标准，后来经过修订于2002年重新发布 HTML5 2012 W3C推荐标准 XHTML5 2013 更新版，基于HTML5草案 四