-
本版专家分：0结帖率 0% -
手机端开发html，a页面跳转到b页面，当b页面返回到a页面，要求页面不刷新，不重载。试过很多安卓手机发现都会刷新，iphone的手机就不会有这种现象。
目前个人解决方法是安卓机型用window.localStorage进行缓存页面，当返回时判断是否有本地缓存，然后直接读缓存，但是出现的问题就是
a->b->c 我的缓存只保存b页面 ，当b返回a的时没有缓存就会就会重载，效果不理想。
所以求助：有做过类似功能的知道怎么处理嘛？
-
本版专家分：135536
-
- 进士 2017年 总版技术专家分年内排行榜第七
-
-
铜牌
2018年10月 总版技术专家分月排行榜第三
2018年9月 总版技术专家分月排行榜第三
2018年8月 总版技术专家分月排行榜第三
-
-
红花
2018年12月 Web 开发大版内专家分月排行榜第一
2018年11月 Web 开发大版内专家分月排行榜第一
2018年10月 Web 开发大版内专家分月排行榜第一
2018年9月 Web 开发大版内专家分月排行榜第一
2018年8月 Web 开发大版内专家分月排行榜第一
2018年5月 Web 开发大版内专家分月排行榜第一
2018年1月 Web 开发大版内专家分月排行榜第一
2017年12月 Web 开发大版内专家分月排行榜第一
2017年6月 Web 开发大版内专家分月排行榜第一
2017年2月 Web 开发大版内专家分月排行榜第一
2016年3月 Web 开发大版内专家分月排行榜第一
2015年8月 Web 开发大版内专家分月排行榜第一
-
-
黄花
2018年7月 Web 开发大版内专家分月排行榜第二
2018年6月 Web 开发大版内专家分月排行榜第二
2018年4月 Web 开发大版内专家分月排行榜第二
2018年3月 Web 开发大版内专家分月排行榜第二
2018年2月 Web 开发大版内专家分月排行榜第二
2017年11月 Web 开发大版内专家分月排行榜第二
2017年10月 Web 开发大版内专家分月排行榜第二
2017年9月 Web 开发大版内专家分月排行榜第二
2017年8月 Web 开发大版内专家分月排行榜第二
2017年7月 Web 开发大版内专家分月排行榜第二
2017年5月 Web 开发大版内专家分月排行榜第二
2017年4月 Web 开发大版内专家分月排行榜第二
2017年3月 Web 开发大版内专家分月排行榜第二
2017年1月 Web 开发大版内专家分月排行榜第二
2016年11月 Web 开发大版内专家分月排行榜第二
2016年9月 Web 开发大版内专家分月排行榜第二
2016年8月 Web 开发大版内专家分月排行榜第二
2016年7月 Web 开发大版内专家分月排行榜第二
2016年6月 Web 开发大版内专家分月排行榜第二
2016年5月 Web 开发大版内专家分月排行榜第二
2016年4月 Web 开发大版内专家分月排行榜第二
2016年2月 Web 开发大版内专家分月排行榜第二
2015年9月 Web 开发大版内专家分月排行榜第二
2015年7月 Web 开发大版内专家分月排行榜第二
2015年6月 Web 开发大版内专家分月排行榜第二
2015年4月 Web 开发大版内专家分月排行榜第二
2015年3月 Web 开发大版内专家分月排行榜第二
2015年2月 Web 开发大版内专家分月排行榜第二
-
-
你每个页面都设置一个独立的缓存啊
如
a页面用 window.localStorage.pageA 存放缓存数据
b页面用 window.localStorage.pageB 存放缓存数据
-
本版专家分：0
-
那如果我开好多级别呢 那岂不是每次都要缓存?
-
本版专家分：0
-
可以做到一个页面上，用js+ajax进行切换和获取数据
-
本版专家分：0
-
当b页面返回到a页面，不需要数据交换，直接关闭当前页面，并返回上一页
-
本版专家分：0
-
有的浏览器会自动刷新
-
本版专家分：438 -
在服务器端设置HTTP头启用内容过期时间为一天。
-
本版专家分：0
-
这个我。。。。。。我这个
-
本版专家分：0
-
在服务器端设置HTTP头启用内容过期时间为一天。
-
本版专家分：0
-
在服务器端设置HTTP头启用内容过期时间为一天。
-
本版专家分：0
-
，iphone的手机就不会有这种现象。
- 移动端点击后退时页面缓存的问题
- <!DOCTYPE html> sss alert(1) window.onpageshow = function(e) { if (e.persisted) { alert('rel
- 移动端 h5开发遇到的问题总结
- 1、去掉 a，input 在<em>移动端</em>浏览器中的默认样式 ①禁止 a 标签背景 在<em>移动端</em>使用 a标签做按钮的时候，点按会出现一个“暗色”的背景，去掉该背景的方法如下a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色
- 移动端h5监听浏览器返回操作（目前在react项目中用到）
- 前言 1.主要是返回是默认的浏览器返回事件是返回上一个<em>页面</em>。 2.处理<em>页面</em>各种弹窗，点击物理返回应该隐藏这些弹窗而不是直接返回<em>页面</em>。 3.总结下<em>问题</em>，<em>h5</em>应该希望能监听到返回事件并且做一些处理。 相关知识 1、利用popstate事件，点击浏览器前进，<em>后退</em>会触发popstate事件。 2、利用hashchange事件，<em>页面</em>hash改变是会触发此事件（适合react，vue单页...
- Android混合开发中遇到内置H5界面点击标题栏返回按键无法后退问题跟踪解决
- 最近在做项目开发，在Android原生代码中采用WebView呈现H5界面内容后，发现界面标题栏的返回按钮点击后无任何反应，自己也是查阅了很多的资料和内容，为了避免以后再次遇到这样的<em>问题</em>，特此记录。<em>问题</em>描述：我们在androidAPP 中通过webView集成了一个外部的链接网址，集成后，发现Html界面上标题栏的返回按钮无法使用，点击后无任何反应。在这里贴出Html中返回按钮的代码，其他部分无影...
- 移动端左右滑动阻止触发上一页下一页操作
- 最近有个需求，就是非常简单地横向滑动。打算使用overflow-x:auto;来试验原生滑动，但在安卓版UC下当滑到最左或者最右会 1 默认启用UC上一页、下一页手势 ，导致<em>页面</em>的跳转（原生浏览器无此手势）。之前好几个项目之前视频有使用js处理(query: 夏洛特烦恼), 横向滑动没有加惯性支持，非常卡顿。感觉此类对距离没有要求的滑动用原生最好，而
- H5手机禁止触屏页面滑动。滚动
- document.addEventListener("touchmove",function(e){ e.preventDefault(); e.stopPropagation(); },false);
- JS移动端浏览器取消右划后退的几种方法
- 在开发过程中，发现我们公司所使用的APP有点BUG，在APP中打开网页、H5应用之后，处于首页时，轻微的右划触发了<em>后退</em>事件，导致直接退出网页或者H5应用的<em>页面</em>，这样使得很多需要交互的手势没办法使用。本来这个右划<em>后退</em>事件是不应该出现在第一页的，这个BUG也应该由APP得开发来解决，不过当时这个APP是外包做的，如果更改这些比较麻烦，因此解决<em>问题</em>的任务就由我来了。 在使用某些JS插件（fullpage
- 手机移动端web 禁止手机返回功能
- 手机<em>移动端</em>web 禁止手机返回功能的最好方法 虽然很变态,但是很有效. var href = window.location.href; window.location.href = href + "#aaa"; window.location.href = href + "#bbb"; win
- H5历史状态管理问题——后退前进按钮的重新使用
- <em>问题</em>：现代Web应用中，用户的每次操作都不一定打开一个新的<em>页面</em>，但此时<em>页面</em>的“<em>后退</em>”和“前进”按钮就失去了作用，用户很难在不同状态间切换。 解决方法：hashchange事件 H5通过更新history对象添加历史状态。 效果：通过历史状态管理API，能够在不加载新<em>页面</em>的情况下改变浏览器的URL。 过程： 1、使用history.pushState()创建新的历史状态，但浏览器不会真
- H5移动端常见问题及注意事项
- H5项目常见<em>问题</em>及注意事项 Meta基础知识： H5<em>页面</em>窗口自动调整到设备宽度，并禁止用户缩放<em>页面</em> //一、HTML<em>页面</em>结构 // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一
- 移动端点击返回键，页面不刷新解决方案
- 今天分享下，在浏览器中点击返回或者前进按钮时，<em>页面</em>不刷新的<em>问题</em>。这个<em>问题</em>存在于<em>移动端</em>居多，尤其是苹果手机。我们一起看看这到底是怎么一回事！ 如果是<em>移动端</em>下，可能有两种情况： 第一种是在自己的app下点击返回的时候<em>页面</em>不刷新，这有可能是你们原生开发人员，只是关闭了当前的一个窗口，也就是说那个窗口是新开的。这种解决方案，老夫只能说找你们的原生开发吧。 第二种则是在微信、uc这类的浏览器出现，这是
- 关于移动端H5页面返回上一页的问题记录
- 最近第一次接触公众号开发，虽然也是H5<em>页面</em>的开发，但是真心伤不起，坑好多...... 突然理解做前端的童鞋为啥会最讨厌那句话：前端不就js吗？息怒息怒.... 公众号有初始为注册流程，注册成功后，菜单列表的每个模块点击会进入相应的<em>页面</em>。没有注册，则会直接转发到注册<em>页面</em>。然而坑来了，其中一个模块点击进去后有两个下级<em>页面</em>，1.为数据列表展示，点击某条数据进入下一级具体数据展示2<em>页面</em>。就当2返回1 ...
- 移动web前端开发javascript:history.back(-1);返回上一页在手机浏览器里失效是怎么回事？
- 在谷歌浏览器模拟手机测试是能正常返回上一页，但是到了手机测试的时候返回上一页就失效了，这是怎么回事？
- iOS新版微信底部返回横条问题
- 之前没有怎么接触过微信开发，只是对H5比较熟。最近维护一个微信公众号的项目，遇到了iOS端返回键的坑。 描述一下： 从公众号打开<em>页面</em>后，底部有个返回的小横条，恰好也挡住了<em>页面</em>。这不行啊，得解决。 <em>页面</em>的高度是调用 $(window).height();来获取的，但道理来讲应该没什么<em>问题</em>。 第一个反应是，要不判断一下设备，如果是iOS则给添加一个高度？ 这个想法还没实行呢，就发现了一个现...
- 解决ios微信公众号网页现在新增底部前进后退导航栏产生的布局问题
- 现象：新增前进<em>后退</em>导航栏 <em>问题</em>产生原因：新增导航栏使网页脱离文档流的屏幕高度变小 解决方案： 布局时考虑到影响脱离文档流的底部元素即可根据需要合理布局 ...
- 用cookie解决新版微信中H5页面底部白条问题
- 背景 5月23日微信更新6.6.7版本，新加的文章缩小浮窗功能确实很赞。不过，有一处更新颇使H5开发者感到困扰，就是在iPhone上H5<em>页面</em>最底部多了一个白色的前进<em>后退</em>控制栏，即下图底部的那个白条， 分析 在微信里只要发生<em>页面</em>跳转，这个控制浏览器前进<em>后退</em>的白色条就会出现。 如果进入H5首页每次都要微信授权来获取用户信息，那这个白条将每次都会出...
- 移动端返回上一级页面时强制刷新
- 在<em>移动端</em><em>页面</em>时，点击返回按键回到上一级，默认没有刷新。有时候业务需求需要对上一级<em>页面</em>进行刷新，以下为强制刷新的方法： /* 强制<em>页面</em>刷新*/ window.addEventListener('pageshow', function(event) { //event.persisted属性为true时，表示当前文档是从往返缓存中获取 if(event.persisted) lo...
- 移动端返回上一页并刷新
- htmljqonload=function(){ var refreshedId=document.getElementById("refreshed"); if(refreshedId.value=="no"){ refreshedId.value="yes";
- 移动端点击返回键 页面不刷新
- 在浏览器中点击返回或者前进按钮时，<em>页面</em>不刷新的<em>问题</em>。这个<em>问题</em>存在于<em>移动端</em>居多，尤其是苹果手机。这种<em>问题</em>经常在微信、uc这类的浏览器出现，这是因为浏览器保存了DOM和js的状态，相当于保存了整个<em>页面</em>，这种特性称作 “往返缓存”（back-forward cache，或bfcache）。对于这种情况可以用“pageshow”事件来解决，“pageshow”事件表示浏览器展示文档的时候触发，并且是在“o...
- 移动端后退刷新
- <em>后退</em>刷新 前段时间遇到了<em>移动端</em><em>后退</em>更新的业务需求，踩了坑当然要总结了。 <em>后退</em>更新的坑在于浏览器<em>后退</em>时，缓存文件的使用，JS 代码的执行。 一、使用了缓存文件，从缓存方向解决 直接禁用缓存，如meta禁用缓存（不可靠），在响应的 header 里面禁用换缓存 （手机端）此方法行不通，因为有些浏览器会忽略这个头部 二、bfcache 与 pageshow bfcache，即bac...
- 解决iOS微信底部返回横条问题
- 最近做微信公众号的开发，遇到 iOS新版微信的底部会出现返回小横条的坑。从公众号打开<em>页面</em>，底部有个返回的小横条，会遮挡<em>页面</em>底部。但是再刷新一下该组件<em>页面</em>，就不会遮挡了。其实就是第一次出现小白条时，<em>页面</em>高度获取会有<em>问题</em>。 #####一、解决部分<em>问题</em> 查资料得知**小横条的出现是因为<em>页面</em>跳转产生历史纪录。**所以我想，使网站不存在历史纪录，没有返回，从而不出现小横条。那么可以使用location.r...
- IOS微信内置浏览器history.back();不刷新页面解决办法
- 最近开发了一下小型投票网页，发现苹果手机的微信内置浏览器history.back();语句能返回上一页但是无法自动刷新，已经被苹果微信内置浏览器坑了太多次了。。。这次总算下定决心找一下解决办法了。 我详细描述下这坑是这样的，使用流量是一切正常的，但是当使用公司公用无线网时，大概是网速受限，（说起来我司的无线网也是很调皮，刷微博淘宝简直是飞一般的感觉，一刷自己开发的微信企业号网页，就慢成了地里的老
- 微信公众号开发，ios系统自带返回按钮，不刷新页面
- 微信公众号开发时，在IOS系统下点击返回按钮，发现返回后的<em>页面</em>是没有经过刷新的，虽然这样是有好处，不用再重新请求<em>页面</em>数据，但是很多时候我们是需要重新去请求<em>页面</em>数据的。 首先我们需要监听手机的系统，然后在监听返回事件，当用户点击返回按钮后，将<em>页面</em>进行强制刷新，代码如下 var ua = navigator.userAgent; if (ua.indexOf('iPhone') > -
- 解决UIWebView 前进、后退刷新的坑
- 分析对照UCWeb，通过设置 pagecachesize 解决UIWebView 前进、<em>后退</em>刷新<em>页面</em>的<em>问题</em>。
- 移动端H5页面返回并且刷新页面（BFcache）
- 项目中的需求：点击浏览器中的返回按钮，要让<em>页面</em>重新加载资源。因为这部分的资源每次去加载的内容都不一样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很小了；而如果用户看完了这部分内容，再返回来的时候，这个地方换成了新的内容，这样就能体现这部分的价值了。 而对于浏览器来说，大部分浏览器的返回是直接使用缓存的，不会执行任何的javascript代码。原因：部分浏览器在<em>后退</em>时不会触发onl...
- 关于IOS移动端H5返回之后不刷新
- 在网上找了几个答案都没有解决，但是在Github上找到了解决办法 浏览器往返缓存（Back/Forward cache）<em>问题</em>的分析与解决 感谢原作者！
- H5页面在IOS后退不刷新的解决方法
- 发现一个<em>问题</em>，当我点击左上角的返回按钮，或者安卓上点击<em>后退</em>的时候，发生了两个不可思议的事情：<em>页面</em>没有刷新，而是直接读取的缓存。<em>页面</em>上绑定在window上的事件莫名其妙的消失了（例如onscroll）这个时候，肯定就很自然的联想到了可能是微信内核引起的，二微信此次换内核，更换成的是苹果的 WKWebview 内核。Safari很早之前就使用了这个内核，而且微信官方明确表示，更换后，将和Safari ...
- 内置浏览器返回键重定向问题解析
- 1、目前android端物理硬件返回键与左上角返回键处理基本一致，都是调用webview中的goback方法。 好处：可以满足大部分的网页<em>后退</em>与关闭。 不足之处：个别网页会因为重定向<em>问题</em>无法返回之前的<em>页面</em> 解决方案：不是必需重定向的<em>页面</em>，去掉重定向。如果是必需要重定向的<em>页面</em>，客户端需要自己维护一个历史栈，同时需要前端通过
- 浅谈h5移动端页面的适配问题
- 一、前言 昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目做响应式还是可以可以得。例如博客、后台管理系统等。但是有些会认为响应式很牛逼，尤其是在不懂前端的人眼中，一味的追求响应式布局，我觉得复杂的布局项目做响应式还不如做二套样式，因为响应式的样式混在一起真的维护起来是恨费劲的。可能我说的不对，但是发表 一点点自己的看
- 微信里iphone后退不刷新问题解决方案，真实有效
- 网上有很多这些文章，但我觉得没一篇真正解决这个<em>问题</em>，倒是能给人一个解决方案的思路，对，就是posState事件。 要解决这个<em>问题</em>也不难，使用history的replaceState属性替换当前网页链接（其实作用是在不增加history长度的基础上，仍然使用当前网面链接不能使用popState,因为它的作用是增加了history的长度，<em>后退</em>时会出错，往往跳不出循环）。 完整代码如下： $(func
- 很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
- 在实际的应用中，我们常常需要实现在移动app和浏览器中点击返回、<em>后退</em>、上一页等按钮实现自己的关闭<em>页面</em>、调整到指定<em>页面</em>或执行一些其它操作的需求，那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或<em>后退</em>按钮的事件呢。 我相信很多朋友像我一样，在百度、搜狗里面搜索很久都没找到方法。下面就来告诉大家怎样监听的方法： 首先我们要了解浏览器的h
- h5 返回到之前的页面几种方法
- 1、返回上一页,不刷新history.htmlwindow.history.go(-1); javascript:window.history.go(-1)2、返回上一页并刷新<em>页面</em>avascript:location.replace(this.href);event.returnValue=false;3、返回上一页并刷新self.location=document.referrer4、返回上一页...
- 前端返回、前进方法总结（H5）
- 前端返回、前进方法总结（H5） 之前一个项目中，需要有多个不同的<em>页面</em>进入一个公共的<em>页面</em>，然后再从这个公共的<em>页面</em>返回到各自不同的<em>页面</em>，在此就用到了history.back(-1)和history.go(-1)，在刚开始的时候使用的是history.back(-1)，后来发觉没有预期的效果，返回后所有数据被清除了，然后找了资料了解到history.go(-1)的返回是不清数据的，然后果断换成histo...
- iOS中给webView添加手势返回的问题
- 在IOS开发中,给webView添加一个轻扫手势,就可以返回上一个网页. 上代码 #import "CKCenterMenuVC.h" @interface CKCenterMenuVC () @property(nonatomic,strong) NSURL *url; @property(nonatomic,strong)
- 关于移动端横竖屏后的样式问题
- 横屏和竖屏切换之后,<em>页面</em>样式发生变化,可能会导致某一部分显示不全,所以就用刷新<em>页面</em>的办法来解决 window.orientation 判断手机横竖屏状态 如果有需求支持翻转180度的话就在判断里加上...
- H5页面在移动端的兼容问题
- 本文首发我的简书 论<em>移动端</em>的<em>问题</em>，其实我碰到的很多都在ios端，本来一个<em>页面</em>在安卓手机上跑得好好的，测试小哥突然抛个bug——ipnone7测试样式需要优化之类的，每次拿到这些<em>问题</em>，都更加坚定了我不想用苹果手机的决心…，下面我就将这些曾经困扰我的<em>问题</em>一一道来。 1. &amp;lt;input type=number&amp;gt;在ios上可以改变键盘类型从而输入非数字(本来期望只能填入数字) ...
- 记录处理移动端浏览器点击返回页面不刷新
- 一些浏览器中返回按钮是直接使用缓存的，不会执行任何js代码，例如, 在提交的时候将按钮设置为loading状态，如果在提交成功后没有对按钮进行处理，那么返回后按钮依然是loading状态，这就很尴尬了尴尬。 原因：部分浏览器在<em>后退</em>时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache) 什么是bfcache 《JavaS
- 一场面试过后—移动前端开发
- 今天我又去面试了，外界因素一如从前，大公司，面试官男。但是重点是面试，考得是我更渣渣的移动前端。 因为技术原因面试题没做完也就记得不全了，不过面试官讲了很多他的方法，32个赞。着重优化，css3。 ctrl无数次这个标签，今天没写出来，回来敲了下，估计下次还忘，哈哈哈~ 第二个是动画 div水平移动200px; 面试官好像提到了Traqball.js。我去度娘了，这是一个很小的
- H5移动端点击事件穿透问题解决
- 最近有遇到前端事件点击穿透的<em>问题</em>，拿来跟大家分享一下。 1.<em>问题</em>描述： 情景一：蒙层点击穿透<em>问题</em>，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。 情景二：跨<em>页面</em>点击穿透<em>问题</em>：如果按钮下面恰好是一个有href属性的a标签，那么<em>页面</em>就会发生跳转。 情景三：另一种跨<em>页面</em>点击穿透<em>问题</em>：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新<em>页面</em>中对应...
- h5rem自适应框架
- <em>移动端</em><em>h5</em><em>页面</em>rem适配
- 微信web端后退强制刷新功能的实现代码
- 具体代码如下所示： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28...
- h5 history api实现无刷新前进后退
- 操纵浏览器的历史记录 history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为<em>页面</em>标题，当前所有浏览器都会 忽略此参数；url为<em>页面</em>地址，可选，缺省为当前页地址。 history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同
- 移动端H5视频页面坑之总结
- 最近刚做了一个<em>移动端</em><em>页面</em>，大致功能是原生app分享出来到各大平台的视频<em>页面</em>，做的过程中遇到的<em>问题</em>总结如下：
- H5 页面回退问题
- 1.加标志位。 http://blog.csdn.net/mrbourne/article/details/60957652 2.pushstate http://blog.csdn.net/xcqingfeng/article/details/70800118#reply
- 手机移动端web 禁止手机返回功能的最好方法,虽然很变态,但是很有效.
- 手机<em>移动端</em>web 禁止手机返回功能的最好方法 虽然很变态,但是很有效. var href = window.location.href; window.location.href = href + "#aaa"; window.location.href = href + "#bbb";
- 浅谈移动端页面无刷新跳转问题的解决方案
- 浅谈<em>移动端</em><em>页面</em>无刷新跳转<em>问题</em>的解决方案2017-12-22 祈澈姑娘最近开发微信公众号，用的框架是 一般的 UI，但是涉及到多<em>页面</em>之间的相互跳转的<em>问题</em>，降低了浏览器的性能，用户体验特别不好，卡顿，不流畅,因此不采用传统的<em>页面</em>跳转方式，看到不少手机网页开发的框架都都是在一个html文档中包涵多个<em>页面</em>的内容，每页放到不同的里面。于是采用当下流行的单<em>页面</em>模，...
- JS监听手机端浏览器的后退按钮的事件方法
- 转载地址：http://www.jb51.net/article/89921.htm 首先我们要了解浏览器的history。 大家知道在<em>页面</em>中我们可以使用javascript window history，<em>后退</em>到前面<em>页面</em>，但是由于安全原因javascript不允许修改history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popsta
- h5移动端兼容问题
- H5项目常见<em>问题</em>及注意事项H5<em>页面</em>窗口自动调整到设备宽度，并禁止用户缩放<em>页面</em> //一、HTML<em>页面</em>结构 // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 //
- 手机端解决页面缓存问题
- 像网上说的一些方法，经本人测试，都是无效的，如给head加meta标签： meta http-equiv="pragram" content="no-cache"> meta http-equiv="cache-control" content="no-cache, must-revalidate"> meta http-equiv="expires" content="0">123
- h5在移动端适配经验总结
- 最近因为一些需要，做了<em>h5</em>相关的工作。发现在pc端浏览器和<em>移动端</em>浏览器上的效果大大不一样，总结如下适配经验，后面总结的继续在这里累加：1.点击事件的适配 首先，需要在head中添加width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximu
- 如何实现：移动端点击返回 仍然在原来的位置
- 有很多简单的方法 ：history.back(-1); history.go(-1); window.location.href('...') $('html, body').animate({ scrollTop: $("#" + $('#UPDID').val()).offset().top }, 1
- 移动端h5开发,华为手机输入法键盘影响页面布局的问题。
- 在做<em>移动端</em><em>h5</em>的时候，有些简单的<em>页面</em>，我们一般都会给body写上： width:100%; height:100%; 然后给一个满屏的背景图，简单方便的适应不同屏幕的手机。 有时候为了采集用户信息，<em>页面</em>上会放置几个input框让用户填写，那么<em>问题</em>就来了。 如图，一个100%布局的<em>页面</em>，上面有一个input 在input没有获得焦点(即没有弹出输入法)的时候,我们的华为
- 移动端 H5 --页面适配（二）
- 一、基础概念 在了解如何做H5<em>页面</em>适配前，大家都应该把<em>移动端</em>涉及的一些概念搞明白，比如：dpr 是什么意思？ <em>移动端</em>H5解惑-概念术语（一） 二、为什么要做<em>页面</em>适配 2.1 PC端为什么要解决浏览器兼容 因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样...
- IOS浏览器点击后退后，页面空白
- <em>问题</em>场景：项目中在别人的APP中嵌入一张卡片，作为入口进入自己项目的sdk, 需求是只有高版本的用户才能进入sdk，低版本的需要引导用户更新APP在APP和sdk之间，加入一个H5<em>页面</em>，在APP中点击入口后，进入H5<em>页面</em>，<em>页面</em>内容是引导用户更新，在H5<em>页面</em>加载（window.onload）时，判断APP传来的版本号，如果是低版本，继续渲染H5<em>页面</em>，完成引导用户更新。高版本则直接跳转（window....
- iOS微信浏览器回退不刷新（监听浏览器回退事件）
- iOS在微信浏览器回退是不重新加载<em>页面</em>的，有些时候是需要重新加载的，所以需要监听回退事件
- 移动端横竖屏问题--兼容iPhone、Android
- <em>移动端</em>竖屏效果好做，可是如果在浏览器横屏的话<em>页面</em>瞬间变丑，怎么办呢，我来分享一下我的方法，希望对大家有所帮助。 首先，在<em>页面</em>内容的外面增加一个盒子，css样式如下：.main{ position: absolute; top: 0;bottom: 0;left: 50%; margin-left: -1.8rem; // 居中 width: 3.6rem;
- H5页面,移动端单位适配
- js中script标签中直接写入：（网易写法） document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px'即可； 这里的6.4写7.5也可，依据是设计图的尺寸是640的还是750的； <em>页面</em>的meta标签不需做任何处理即&lt;meta name="viewport" c...
- 关于h5移动端常见问题整理
- <em>移动端</em>开发要考虑最多的就是兼容性的<em>问题</em>，android和ios的兼容，css3新增属性的兼容以及<em>h5</em>新增标签等使用<em>问题</em>。下面是一些小<em>问题</em>以及解决方案，仅供参考。 【1】.<em>关于</em>样式的总结 1.<em>移动端</em>开发<em>页面</em>会左右晃动，这时候我们需要给外层容器加上overflow-x：hidden。 2.遮罩层下面的内容依然会滑动，这时候我们可以把所有相关事件都
- 移动端h5页面不同尺寸屏幕适配兼容方法
- 最近刚开始做<em>移动端</em><em>页面</em>，遇到了不少bug，说一下解决<em>移动端</em>不同屏幕<em>页面</em>的适应<em>问题</em>。 1. viewport属性及html<em>页面</em>结构 // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例
- 完美解决微信页面返回不刷新问题
- 新到的这家公司业务重点是放在<em>移动端</em>的(以前很少做微信平台相关的<em>页面</em>)，比如微信，小程序，支付宝等等平台。所以<em>页面</em>的制作难免和<em>移动端</em>打交道。现在就遇到一个小<em>问题</em>，但是又很不好解决的一个<em>问题</em>：就是从一个<em>页面</em>跳到另外一个<em>页面</em>，然后再按虚拟键返回时（小米手机左右滑动），<em>页面</em>不刷新！可能有些场景为了性能可以不去请求服务器，但是我这个<em>问题</em>是其他<em>页面</em>更改了数据，返回的时候数据必须更新！但是你微信做...
- 移动端h5开发注意事项
- <em>移动端</em><em>h5</em>开发注意事项： 布局方面： 1.开发时小图片比较多，所以我使用绝对定位的次数比较多，绝对定位时尽量根据top进行定位，bottom定位在<em>移动端</em>下方出现时横条时，会让样式错乱。 2.布局方面我是用的是rem + 媒体查询 我看也有用写一段js脚本实现rem的，这种方式在一定条件很精准，但在屏幕很宽而长度很短时会有一点<em>问题</em>，比如ipad、在实验过程中iphone5也会有点偏差，所以在js中需...
- 单页应用（SPA）前端javascript如何阻止按下返回键页面回退
- 这几年单页应用很流行，利用html5新特性history.pushState/replaceState 可以操作URL无刷新动态加载html内容，达到比较好的用户体验。 不过经常会遇到这样一个<em>问题</em>，那就是用户总是习惯于按返回键来返回上一页，<em>移动端</em><em>页面</em>有弹框的时候，用户期望按下返回键来关闭弹框，这时候却发现返回到了上一页。。。其中的技术原理我们前端同学都知道，不过用户不理解啊，你也没办法解释给他们
- vue 在微信端实现前进左滑，返回右滑的动画效果
- 记录项目中遇到的<em>问题</em>： 1.前进<em>页面</em>左滑，返回<em>页面</em>右滑 的动画效果 2.前进<em>页面</em>数据刷新，返回<em>页面</em>不刷新 目的：通过缓存数据，减少调用接口的次数 App.vue &lt;template&gt; &lt;div id="app"&gt; &lt;transition :name="transitionName"&gt; &lt;keep-alive&gt; ...
- 移动端横屏问题解决方法以及BUG解决方法。
- 1.有的时候做H5的<em>页面</em>的时候会出现要关注横屏的情况。但是如果是用百分比的话横屏容器就会被拉的特别宽。里面的元素标签就会飘的哪里都是。此时就可以使用css3的媒体查询功能来设置布局。 @media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } 2.这个也有一个bug。就是安卓手机的兼容性不
- 移动端h5 页面底部有一条白线的解决方案
- 一般这种情况是由于img标签自带的属性导致，，，如果不是因为img导致的请另行百度 img标签自带有3px的空隙 解决方案大致分为以下三种： img {font-size:0} img {display:block} img {vertical-align:top/middle} ...
- 移动端页面在ios上经常出现的问题
- 头部有输入框，聚焦后固定定位失效，排版混乱 解决方法： 头部用绝对定位，中间内容部分设置高100%，给上padding，然后加上overflow：scroll让中间部分可以滚动， 注意：要看所有父盒子高度是否是100% .top{ position: absolute; top: 0; left: 0; ...
- H5处理移动端虚拟按键问题
- 在做<em>移动端</em>网页的时候，需要对底部虚拟按键进行适配，达到百分百的效果，以下是适配代码： function set_screen(wrap){ var s_height = document.body.clientHeight; var s_width = document.body.clientWidth; var proportion = s_height/s_wi...
- 移动端transition闪烁问题的解决方案
- 1、在目标元素中加入下面任意一条CSS代码-webkit-transform: translate3d(0,0,0); /*开启硬件加速*/ -webkit-backface-visibility: hidden; /*元素旋转时隐藏背面*/ -webkit-transform-style: preserve-3d; /*保留3D空间*/2、在JS中操作元素transform属性进行转换时使用tra
- 解决手机上页面返回但是页面js没有刷新的痛点（BFcache）
- 一些浏览器中返回按钮是直接使用缓存的，不会执行任何js代码，例如, 在提交的时候将按钮设置为loading状态，如果在提交成功后没有对按钮进行处理，那么返回后按钮依然是loading状态，这就很尴尬了。 原因：部分浏览器在<em>后退</em>时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache) 什么是bfcache 《J
- 整理H5|web移动前端自适应适配布局解决方案
- 方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem 1. 简单<em>问题</em>简单解决 我觉得有些web app并一定很复杂，比如拉勾网，你看看它的<em>页面</em>在iphone4,iphone6,ipad下的样子就知道了： 它的<em>页面</em>有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度
- 移动端关于手机横屏时样式修改
- 通过css来实现<em>移动端</em>横屏时展示效果的方法
- H5浏览器和webview后退刷新方案
- 目录 一、背景 二、思路和方案 三、总结 四、花絮 一、背景 用户点击浏览器工具栏中的<em>后退</em>按钮，或者移动设备上的返回键时，或者JS执行history.go(-1);时，浏览器会在当前窗口“打开”历史纪录中的前一个<em>页面</em>。不同的浏览器在“打开”前一个<em>页面</em>的表现上并不统一，这和浏览器的实现以及<em>页面</em>本身的设置都有关系。
- H5移动页面的touch事件与点击穿透问题
- 先举一个例子： Title *{padding:0;margin:0;}html,body{width: 100%;height: 100%;} .mask { position: absolute; width: 100%; height: 100
- 移动端h5页面touch事件与点击穿透问题
- 前言 做过<em>移动端</em>H5<em>页面</em>的同学肯定知道，<em>移动端</em>web的事件模型不同于PC<em>页面</em>的事件。看了一些<em>关于</em>touch事件的文章，我想再来回顾下touch事件的原理，为什么通过touch可以触发click事件，touch事件是不是万能的以及它可能存在的<em>问题</em>。 touch事件的来源 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和clic...
- 移动端H5嵌入iframe滚动问题
- 背景 (1) 实现功能 如图，悬浮窗中为iframe，如果超出容器大小实现滚动。 (2) <em>问题</em> 在iOS上，悬浮窗中的内容如果不是iFrame是可以滚动的，但换成iframe后就无法在其中滚动。 解决方案 (1) 思路 <em>问题</em>在于overflow: auto或者overflow: scroll没有生效。 需要在容器上加上： height: 57vh; overf...
- 关于移动端浏览器定时器后台停止运行的问题
- <em>关于</em><em>移动端</em>浏览器定时器后台停止运行的<em>问题</em>今天在做微信浏览器端的商城项目的时候遇到了一个<em>问题</em>，具体场景是这样的：在<em>页面</em>添加了一个定时器，某项数据每秒递减，当手机锁屏或者后台运行时再返回<em>页面</em>，发现定时器在后台运行时停止了，返回才继续开始运行。解决方法： 这里我是用的是一个H5的一个PageVisibility API，在这里，我们可以得到两个属性及其参数，用来表示当前<em>页面</em>是否可见： document.
- 移动端 vue返回上一步
- <em>问题</em>1：如何使用点击方式控制当前<em>页面</em>返回到上一个路由<em>页面</em>： 在网上查阅了相关的资料，返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上，点击触发该方法；具体代码如下: 1.在当前<em>页面</em>添加返回按钮 &lt;!--返回按钮--&gt; &lt;div class="backTo" v-show="isShow"&gt; &lt;span v-on...
我们是很有底线的