网站开发是分为前端和后端吗/南昌seo搜索优化
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"><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;$('#main_iframe').attr('src',iframeSrc);// 处理刷新页面的时候 安卓 左按钮保持颜色if(iframeSrc.indexOf('init/sub')!== -1) { $('.footer-nav').children('.arrow-icon-left').css('opacity', 0.4);} else {$('.footer-nav').children('.arrow-icon-left').css('opacity', 1);}$('#main_iframe').load(function () {store.setItem('sub_src', sonWin.location.href); // 保存当前子页面的 urlwindow.parent.document.title = sonWin.document.title;//页面title 改变});var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gvar 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>
注意
1. 一定要注意， 如果项目中有 jsapi 支付调用的时候 授权支付目录 那么就存在两个：
1.1. 一个是 ios 微信正常支付的授权目录
1.2. 一个是 android 的父页面授权目录
2. 微信 JsApi 在 父window中
2.1 在安卓机器上测试结果：
alert(typeof WeiXinJsBridge) ;// undefined
alert(typeof parent.WeiXinJsBridge); // [object]
2.2 在 微信开发这个工具中， 无论子窗口还是 父窗口都能正常读取 WeiXinJsBridge
2.3 解决方法
子 window 中的需要使用 WeiXinJsBridge的支付页面
window.WeiXinJsBridge = window.WeiXinJsBridge || window.parent.WeiXinBridge;