Aphorism
grow in errors
overview
最近在写一个 移动端的 jsp 项目， 应项目需求须在安卓机器上实现一个 ios 微信h5页面 底部的 导航条
想到的实现方案：
- 通过jsp 写一个 父页面然后 每个子页面通过 include 底部导航条， （android 和 ios 客户端不好区分且导航条会有闪烁效果）
- 通过 js 在每个页面中 底部添加一个导航条（每个页面的加载得判断客户端类型且跳转和刷新页面导航条会闪烁）
- 经过一段时间思考， 在我们写 vue 的时候， 我们可以通过父组件来实现 不会闪烁的导航条 ，但是我们是 jsp 页面。 功夫不负有心人， 可以通过 iframe 来实现子组件（页面） ， 我们将导航条放在父页面中， 且 父页面的职责就是 导航条的样式和 逻辑 将导航条和 子页面 分离开。
使用 iframe 优点如下：
- 解决了 跳转刷新导航条问题
- 子页面和导航条的 分离开来， （其实是为了以后维护， 不然去掉此功能的时候还得每个页面操作）
- 在弹层提示的时候 导航条不会被遮盖
面对的问题：
- 刷新页面的时候， iframe 页面会跳转到 src 中的对应路径（不是当前的 url）
- 地址栏灭有 url 变更， ios 就不会产生 底部导航条（可以通过这种方式去除 微信h5页面的导航条）
解决问题：
- 在父页面中 通过 sessionStorage 读取src指向的 url， 在 iframe load 的时候往sessionStorage 中写 url （注意一定要使用 session 而不是 local）a
- 判断为 ios 设备的时候 就直接 parent.location.href … 不经过 iframe 就ok 了
d
父页面代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>停车缴费</title>
<link rel="stylesheet" href="${contextPath}/resources/css/local/weChat/reform/base.css">
<link rel="stylesheet" href="${contextPath}/resources/css/local/weChat/reform/index.css">
<style>
</style>
<script type="text/javascript" src="${contextPath}/resources/js/lib/jquery/jquery_1.9.min.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/local/common/base.js"></script>
<!-- <script type="text/javascript" src="${contextPath}/resources/js/local/weChat/reform/pull_to_refresh.js"></script> -->
<script type="text/javascript" src="${contextPath}/resources/js/local/weChat/reform/tools.js"></script>
</head>
<body>
<iframe id="main_iframe" frameborder="0"></iframe>
<div class="footer-nav">
<span class="arrow arrow-icon-left"></span>
<span class="arrow arrow-icon-right"></span>
</div>
</body>
<script>
var store = {
setItem: function (name, value) {
value = JSON.stringify(value);
window.sessionStorage.setItem(name, value);
},
getItem: function (name) {
return JSON.parse(window.sessionStorage.getItem(name));
}
};
$(function (){
var openid = getOpenId('openid');
// 处理 刷新 不保持当前页面问题
var iframeSrc = "/weixin/reform/index/homepage/init/sub";
iframeSrc = store.getItem('sub_src') || iframeSrc; // 注意这里使用的是 sessionStorage 来存储， 不然会有缓存问题
var sonWin = document.getElementsByTagName("iframe")[0].contentWindow,
sonDoc = sonWin.document;
iframeSrc && $('#main_iframe').attr('src',iframeSrc);
$('#main_iframe').load(function () {
store.setItem('sub_src', sonWin.location.href);
});
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isWeixin = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger';
if (!(isAndroid && isWeixin)) { // ios 微信 则通过 父页面进行跳转， 这样 ios 微信就可以 产生 导航条
window.location.href = iframeSrc;
}
$('.arrow-icon-left').click(function () {
window.history.back();
});
$('.arrow-icon-right').click(function () {
window.history.forward();
});
});
</script>
</html>
首页子页面添加 控制 左箭头颜色代码
<script>
window.addEventListener('pageshow', function () {
window.parent.$('.footer-nav').children('.arrow-icon-left').css('opacity', 0.4);
});
window.addEventListener('pagehide', function () {
window.parent.$('.footer-nav').children('.arrow-icon-left').css('opacity', 1);
});
</script>