微信瀏覽器的緩存
可怕的頁面緩存,微信中點后退不會重新發(fā)請求,但頁面卻會重新渲染,應(yīng)該是從緩存中加載了,導致一些異步操作的元素狀態(tài)都恢復如初。
解決方案 :
- 添加時間戳隨機數(shù)
www.123.com/test.html?v=20150316
- 在html標簽中增加不存在的manifest文件鏈接:
<html manifest="IGNORE.manifest">
[根據(jù)HTML5 W3C規(guī)范,解析器下載manifest header 404/410時,緩存即失效](見 http://www.w3.org/TR/html5/browsers.html#downloading-or-updating-an-application-cache “5.7.4 Downloading or updating an application cache > 5.If fetching the manifest fails due to a 404 or 410”)
該方法對其它有自己緩存機制和緩存規(guī)則的應(yīng)用也有奇效。
- 使用meta標簽
網(wǎng)上出現(xiàn)頻率最高的解決方案,然并卵。
引用JSSDK
需要使用 wx.config 對于引用進行驗證。如果沒有通過的話,在ios上只對基礎(chǔ)API有效(隱藏菜單可以,分享不可以),在android上無效。
建議安裝“微信web開發(fā)者工具”,可以看到橋調(diào)用的信息。
特殊的分享參數(shù)
當鏈接經(jīng)過分享打開后,微信瀏覽器會在連接中加上一下參數(shù),其含義如下
朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0
微信自定義模板
開發(fā)平臺上編輯自定義模板時,不要使用粘貼復制 會出現(xiàn)編碼問題導致在iphone 超鏈接失效
防運營商注入腳本
<meta http-equiv="Content-Security-Policy" content="default-src *.qunarzz.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
self是指當前域名下,從上面的介紹可以看到,CSP協(xié)議可以控制的內(nèi)容非常多。而且如果不特別指定’unsafe-inline’時,頁面上所有inline的樣式和腳本都不會執(zhí)行;不特別指定’unsafe-eval’,頁面上不允許使用new Function,setTimeout,eval等方式執(zhí)行動態(tài)代碼。在限制了頁面資源來源之后,被XSS的風險確實小不少
禁用微信webView調(diào)整字體大小
微信的 iOS 版的調(diào)整字體大小使用的是通過給 body 設(shè)置 -webkit-text-size-adjust:120% 屬性實現(xiàn)的,Android 則是用過 Java 調(diào)用 webview 的 API 設(shè)置字體大小。因為這兩個系統(tǒng)實現(xiàn)調(diào)整字體大小的原理不同,所以需要兩種方法來限制微信對網(wǎng)頁字體大小的調(diào)整。
IOS
在 iOS 下,對網(wǎng)頁的 body 元素設(shè)置 -webkit-text-size-adjust: 100% !important; 可以覆蓋掉微信的樣式。
Android
在 Android 下,需要通過 WeixinJSBridge 對象將網(wǎng)頁的字體大小設(shè)置為默認大小,并且重寫設(shè)置字體大小的方法,讓用戶不能在該網(wǎng)頁下設(shè)置字體大小。
(function() {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 設(shè)置網(wǎng)頁字體為默認大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重寫設(shè)置網(wǎng)頁字體大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();
注意:如果用戶之前已經(jīng)設(shè)置過了字體大小,訪問網(wǎng)頁時會先看到字體被放大后的效果再恢復正常,因為在 WeixinJSBridge 對象初始化完成之后才能通過 WeixinJSBridge 對象的方法設(shè)置為默認大小。