一. IOS webView的修改Title Hack
一般来说，js修改网页的title可以随意修改。
但是存在一种特例，比如：用户点击某个btn后修改网页title。此时大部分情况也是没问题的，只有IOS webView修改title不成功。
针对于IOS webView，原因：title在网页加载后就定下来，要想用户点击btn后修改网页title，必须加载html。于是，也就有了解决方法。
setTitle: function(title) { var $body = $('body'); document.title = title; // Hack, Used for IOS weixin and dahuo var $iframe = $('<iframe src="' + 空的HTML + '" style="display:none;"></iframe>').on('load', function() { setTimeout(function() { $iframe.off('load').remove() }, 0) }).appendTo($body) },
二. 获取某月的最后时刻的时间戳
getTheMonthLastTime: function(year, month) { var new_year = year; var new_month = month++; if (month > 12) { new_month -= 12; new_year++; } var new_date = new Date(new_year, new_month, 1); return (new Date(new_date.getTime() - 1)).getTime(); },
三. 判断是否在微信
is_weixin: function() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } },
四. 判断手机系统
aori: function() { if (/Android/i.test(navigator.userAgent)) { return 'android'; } else if (/iPhone|iPod|iPad/i.test(navigator.userAgent)) { return 'ios'; } else { return 'unknown'; } },
五. 微信分享
weixin_share: { addWXScript: function() { //引入js文件 var self = this; var existScript = document.getElementsByTagName('script')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js'; document.body.insertBefore(script, existScript); script.onload = function() { self.webchatShare(); }; }, wx_config: function(appId, timestamp, nonceStr, signature, jsApiList) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: appId, // 必填，公众号的唯一标识 timestamp: timestamp, // 必填，生成签名的时间戳 nonceStr: nonceStr, // 必填，生成签名的随机串 signature: signature, // 必填，签名，见附录1 jsApiList: jsApiList }); }, wx_shareTimeline: function(title, link, imgUrl) { wx.onMenuShareTimeline({ title: desc, // 分享标题 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function() {}, cancel: function() {} }); }, wx_shareAppMessage: function(title, desc, link, imgUrl) { wx.onMenuShareAppMessage({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function() {}, cancel: function() {} }); }, wx_onMenuShareQQ: function(title, desc, link, imgUrl) { wx.onMenuShareQQ({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function() { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); }, webchatShare: function() { var self = this; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { try { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { var response = JSON.parse(xhr.responseText); var config = response.data; //微信分享 if (typeof config == 'object' && config.appid) { var jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline']; self.wx_config(config.appid, config.timestamp, config.noncestr, config.signature, jsApiList); wx.ready(function() { self.wx_shareTimeline(title, link, imgUrl); self.wx_shareAppMessage(title, desc, link, imgUrl); self.wx_onMenuShareQQ(title, desc, link, imgUrl); }); } } } } catch (e) { //alert(e); } }; xhr.open('get', 'https://simu.dahuo.la/wechat/jswechat', true); xhr.timeout = 30000; xhr.send(null); } },
五. 获取url hashParams
getHashParams: function() { var hash = location.hash; var tmpArr = hash.split("&"); var parmObj = {}; if (tmpArr.length > 0 && tmpArr[0] !== "") { for (var i = 0, len = tmpArr.length; i < len; i++) { var tmp = tmpArr[i].replace("#", "").split("="); parmObj[tmp[0]] = tmp[1]; } } else { parmObj = null; } return parmObj; },
六. localStorage和sessionStorage操作
/** *get the localstorage *@method getLocal *@return {string}获取浏览器中保存的某个key对应的值 */ getLocal: function(key) { var storage = window.localStorage; return storage.getItem(key); }, /** *set the localStorage *@method setLocal *@return 将某个key对应的值永久保存到浏览器 */ setLocal: function(key, value) { var storage = window.localStorage; storage.removeItem(key); try { storage.setItem(key, value); } catch (e) { return "error"; } }, /** *get the sessionStorage *@method getSession *@return 将某个key对应的值永久保存到浏览器 */ getSession: function(key) { var session = window.sessionStorage; return session.getItem(key); }, /** *set the sessionStorage *@method setSession *@return 获取浏览器中保存的某个key对应的session值 */ setSession: function(key, value) { var session = window.sessionStorage; session.removeItem(key); try { session.setItem(key, value); } catch (e) { return "error"; } }, //清除缓存 clearLocal: function(key) { var storage = window.localStorage; try { storage.removeItem(key); } catch (e) { return "error"; } }, clearSession: function(key) { var session = window.sessionStorage; try { session.removeItem(key); } catch (e) { return "error"; } },
七. 模态框
移动端的模态框实在是太少，这里提供一个简单易用的。
modal: function() { var defaulOptions = { "80%", height: "auto", isCenter: true, animate: true } var $modal = null, opts; var setOption = function(options) { opts = $.extend({}, defaulOptions, options); } var show = function(options) { setOption(options); $modal = $("#" + opts.id); if ($modal.length) { $modal.find(".modal-header").html(opts.title); $modal.find(".modal-body").html(opts.body); $modal.find(".modal-footer").html(opts.footer); } else { var modal = '<div class="modal-overlay" id="' + opts.id + '">'; modal += '<div class="dahuo-modal">'; if (opts.title) { modal += '<div class="modal-header">' + opts.title + '</div>'; } modal += '<div class="modal-body">' + opts.body + '</div>'; if (opts.footer) { modal += '<div class="modal-footer">' + opts.footer + '</div>'; } modal += '</div></div>'; $("body").append(modal); $modal = $("#" + opts.id); } $modal.addClass("visible").find(".dahuo-modal").css("width", opts.width).addClass("modal-in"); bindEvent(); }; var hide = function() { $modal.removeClass("visible").find(".dahuo-modal").removeClass("modal-in"); }; var bindEvent = function() { $(".modal-cancle").on("click", function(event) { hide(); event.stopPropagation(); event.preventDefault(); }); $(".modal-confirm").off().on("click", function(event) { if ($.type(opts.callback) == "function") { opts.callback(); } else { hide(); } event.stopPropagation(); event.preventDefault(); }); $(".modal-overlay").off().on("click", function(event) { var target = $(event.target); if (target.closest(".dahuo-modal").length == 0 && target.closest("[data-modal]").length == 0) { hide(); } event.stopPropagation(); event.preventDefault(); }); } return { show: show, hide: hide }; }(),
八. 简易的Toast提醒
toast: function(opts) { var defaulOptions = { "content": "", "timeout": "1500", "width": "auto" } var options = $.extend({}, defaulOptions, opts); var time = options.timeout; var $template = '<div class="dahuo-toast" style="' + options.width + '">' + options.content + '</div>'; var $toast = $(".dahuo-toast"); if ($toast.length) { $toast.html(options.content); } else { $("body").append($template); $toast = $(".dahuo-toast"); } $toast.addClass("visible"); setTimeout(function() { $toast.removeClass("visible"); }, time); },
九. 简易的Loading效果
loading: function() { var $loading = $("#loading"); if (!$loading.length) { $loading = '<div class="loading" id="loading"><span></span></div>'; $("body").append($loading); } return { show: function() { $("#loading").show(); }, hide: function() { $("#loading").hide(); } } }(),
十. 简易的时间格式化方法
/* 时间戳转换 dateFormat("1434511073","yy-mm-hh hh:mm:ss") rerurn 2015-06-17 11:17:53 dateFormat("1434511073","yy-mm-hh") rerurn 2015-06-17 dateFormat("1434511073","yy/mm/hh hh:mm:ss") rerurn 2015/06/17 11:17:53 dateFormat("1434511073","yy/mm/hh") rerurn 2015/06/17 dateFormat("1434511073","tomorrow") rerurn 今天11:17 */ dateFormat: function(date, format) { var len = date.length, rdate; var y, month, m, d, h, min, s, days, offset, today; if (len === 13) { rdate = new Date(parseInt(date)); } else if (len === 10) { rdate = new Date(parseInt(date) * 1000); date = date * 1000; } else { rdate = new Date(parseInt(date)); } y = rdate.getFullYear(); month = parseInt(rdate.getMonth()) + 1; m = month < 10 ? "0" + month : month; d = rdate.getDate() < 10 ? "0" + rdate.getDate() : rdate.getDate(); h = rdate.getHours() < 10 ? "0" + rdate.getHours() : rdate.getHours(); min = rdate.getMinutes() < 10 ? "0" + rdate.getMinutes() : rdate.getMinutes(); s = rdate.getSeconds() < 10 ? "0" + rdate.getSeconds() : rdate.getSeconds(); switch (format) { case "yy-mm": { return y + "-" + m; break; } case "yy-mm-dd": { return y + "-" + m + "-" + d; break; } case "mm-dd": { return m + "-" + d; break; } case "yy/mm/dd": { return y + "/" + m + "/" + d; break; } case "yy-mm-dd hh:mm:ss": { return y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s; break; } case "yy/mm/dd hh:mm:ss": { return y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s; break; } case "tomorrow": { days = parseInt((new Date() - date) / 86400000); today = new Date().getDate(); offset = Math.abs(today - d); if (days < 4 && offset < 4) { if (offset === 0) { return "今天" + h + ":" + min; } else if (offset === 1) { return "昨天" + h + ":" + min; } else if (offset === 2) { return "前天" + h + ":" + min; } } else { return y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s; } } default: return y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s; } }
附：相关css
* { margin: 0; padding: 0; } html, body { height: 100%; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } body { height: auto !important; height: 100%; min-height: 100%; font: 14px "Microsoft YaHei", Arail, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-appearance: none; } input, button, a, i { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-appearance: none; } a { color: inherit; text-decoration: none; } i { font-style: normal; } li { list-style-position: inside; list-style: none; } a:focus, i:focus, input:focus, button:focus { outline: none; } .fl { float: left; } .fr { float: right; } .clearfix:after { display: table; content: ""; height: 0; visibility: hidden; clear: both; } .clearfix { display: block; } .hidden { display: none; } .visible { opacity: 1; z-index: 1000; } table { border-collapse: collapse; width: 100%; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .mr-5 { margin-left: 5px; } .mr-10 { margin-left: 10px; } .mr-15 { margin-left: 15px; } .mr-20 { margin-left: 20px; } .mt-20 { margin-top: 20px; } .font-green { color: #1FA400; } .font-red { color: #b71111; } .font-grey { color: #ccc; } .font-color-orange { color: #ff801a !important; } .font-color-green { color: #6db247 !important; } .font-color-grey { color: #999999 !important; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; display: -o-box; -o-box-pack: center; -o-box-align: center; display: box; box-pack: center; box-align: center; padding: 10px; background: rgba(0, 0, 0, 0.6); opacity: 0; z-index: -1; } .dahuo-modal { background: #fff; border-radius: 5px; overflow: hidden; opacity: 0; -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .modal-in { opacity: 1; -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .dahuo-modal .modal-header { line-height: 45px; border-bottom: 1px solid #ddd; text-align: center; } .dahuo-modal .modal-body { padding: 20px 10px; line-height: 23px; } .dahuo-modal .modal-footer { text-align: center; border-top: 1px solid #ddd; font-size: 14px; } .dahuo-toast { position: fixed; top: 50%; left: 50%; padding: 10px; background: rgba(0, 0, 0, 0.6); border-radius: 5px; color: #fff; opacity: 0; z-index: -1; -webkit-transform: translate(-50%, -50%); -webkit-transition: opacity 1s ease-in-out; } .loading { position: fixed; top: 50%; left: 50%; width: 81px; height: 70px; display: block; margin: -40.5px -35px; background: rgba(0, 0, 0, 0.5); z-index: 100; border-radius: 5px; } .loading:after { content: ""; position: absolute; width: 20px; height: 20px; margin: -10px -10px; top: 50%; left: 50%; background: url('../images/droploading.gif') no-repeat center center; background-size: 20px 20px; } @-webkit-keyframes loading { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); } } @keyframes loading { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .visible { opacity: 1; z-index: 10; } .tabs-title:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .tabs-title li { float: left; margin-left: -1px; padding: 10px; } .tabs-title li.active { background: #ccc; } .tabs-contain .tabs-content { margin-top: -1px; padding: 10px 0; display: none; } .tabs-contain .tabs-content.shown { display: block; } .top-msg { position: fixed; top: 0; left: 0; width: 100%; padding: 10px; background: rgba(0, 0, 0, 0.7); color: red; text-align: center; } /*slider*/ .slider-wrap { width: 100%; position: relative; overflow: hidden; } .slider-list { display: -webkit-box; width: 100%; height: 100%; } .slider-item { width: 100%; list-style: none; } .slider-item a { display: block; } .slider-item img { width: 100%; } .transitionable { -webkit-transition: all 0.3s ease-in-out; } .slider-page { width: 100%; position: absolute; bottom: 5px; left: 0; text-align: center; } .slider-page ul { display: inline-block; text-align: center; } .slider-page ul li { display: inline-block; vertical-align: top; width: 6px; height: 6px; margin: 0 5px; border-radius: 50%; background: rgba(255, 255, 255, .5) } .slider-page ul li.active { background: #fff } .img-wrap { width: 100%; height: 100%; background: #fafafa url("../images/loading.gif") no-repeat center center; }