M Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.



====== 关于Iscroll 5.0在chrome上无法滑动问题 ======
<code>
关闭 PointerEvent 即可
全局关闭
chrome://flags/#enable-pointer-events
局部关闭
<!-- 将这段代码放在 head 标签内 -->
<script>window.PointerEvent = void 0</script>
</code>

====== 关于解决iframe在ios设备上无法滚动 ======
<code>
这是safari的webkit内核特性

解决方案：
在iframe外包裹一层div并设置其css属性为：
-webkit-overflow-scrolling:touch;overflow:auto;
</code>
====== 关于encode和decode ======
  - 对于获取地址栏的函数:通常参数都要经过一次或者两次加码的，所以取到参数后要解码。
  - 对于springMVC Controller层：用 @RequestParam("phoneNumber") String phoneNumber去取得数据的时候，其实phoneNumber已经被自动解码过一次了。由servlet中 request.getParameter里做的，它依据的编码格式根据服务器指定的，所以有时候为了防止 中文会乱码，每次加码会喜欢做两次，但是因为我们目前不会传中文。所以现在只加一次。
  - 但有些方法是不会自动解码的，比如在js层用 $('#userForm').serialize() ，然后java层用UserRequest userRequest接受的时候就不会解码。
<code javascript util.js>
  var getURLParam = function (name) {
    var search = window.document.location.search;
    var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
    var matcher = pattern.exec(search);
    var items = null;
    if (null != matcher) {
      try {
        items = decodeURIComponent(decodeURIComponent(matcher[1]));
      } catch (e) {
        try {
          items = decodeURIComponent(matcher[1]);
        } catch (e) {
          items = matcher[1];
        }
      }
    }
    return items;
  };
  
  
    var encode = function (value) {
    var finalValue = null;
    if (null != value) {
      try {
        finalValue = encodeURIComponent(value);
      } catch (e) {
        finalValue = value;
      }
    }
    return finalValue;
  };

  var decode = function (value) {
    var finalValue = null;
    if (null != value) {
      try {
        finalValue = decodeURIComponent(value);
      } catch (e) {
        finalValue = value;
      }
    }
    return finalValue;
  };

</code>

====== 关于静态资源（尤其图片的处理） ======
其实主流的解决 静态资源的方式确实用md5作为revision来解决缓存问题，比如腾讯前端在用的。tmt-workflow
https://github.com/weixin/tmt-workflow/wiki/%E2%92%96-Reversion-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88

他们工具，也是尽量值限制在html里面的静态资源能被脚本自动替换。
脚本替换的时候，只能替换那种本身静态html直接打开相对路径是正常的时候，才会成功。而css,ftl,html这三个文件里引用的静态资源路径都是相对完整的，所以可以用脚本去做。

如果也要求能替换js里面动态的引入静态资源，因为js脚本可以随意拼凑整个文件路径。grunt很难控制替换后文件是否有效，干脆就不做整个事情。

所以 大家以后就注意：别在js中动态引入图片等静态资源。
关于require里面引用js，因为脚本做了特殊处理，所以不会出问题。


====== 关于form中只含一个input框的问题 ======
默认情况下，单个输入框，无论按钮的type="submit"还是type="button"类型，回车即提交，那么如何去除表单的回车即提交
<code>
实现"回车!=提交"的问题，一般可以从"按钮的type类型" 和 "输入框个数"两处着手。 

默认情况下，单个输入框，无论按钮的type="submit"还是type="button"类型，回车即提交。 

1.当type="submit"时，无论有几个type="text"输入框，回车均表示提交。（submit） 

2.当type="button"时，且存在多个输入框，回车不提交。（button） 

3.解决单个输入框的回车即提交问题，参考第二点：可以增加一个input="text"，隐藏; 然后type类型为button。 
在实际应用中，input输入框很少只有一个的情况，那么只需记住第二条即可应对。 
<input style="display:none" class="weui-input" id="ignoreInput" name="ignoreInput" type="text" />

使用JS事件阻止表单提交 不在本文讨论范围，当然也是可以实现的。
</code>

====== 关于微信浏览器的Bug ======
知乎上说： 在页面刷新的时候通过js修改title时，可惜在iOS微信浏览器无效。

我现在发现 在新版的微信上，安卓的，微信调试工具，ios的微信浏览器上 都是无效的。 所以请使用如下方式解决

<code>
  var $body = $('body');
  document.title = 'the title you want to set';
  var $iframe = $("<iframe src='/favicon.ico'></iframe>");
  $iframe.on('load',function() {
    setTimeout(function() {
      $iframe.off('load').remove();
    }, 0);
  }).appendTo($body);
</code>

====== 关于iphone上的全屏显示 ======
<code>
apple-mobile-web-app-capable: Sets whether a web application runs in full-screen mode.

Syntax
<meta name="apple-mobile-web-app-capable" content="yes">

Discussion
If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.

You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Availability
Available in iPhone OS 2.1 and later.

Support Level
Apple extension.
</code>
====== 关于页面模版 ======
<code html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"> <!-- IE时使用最新的渲染，Chrome时激活Chrome Frame-->
  <meta name="renderer" content="webkit">   <!-- 为360浏览器的优化 -->
  <meta name="keywords" content="理财平台，恒大">
  <meta name="description" content="恒大金服——让您的每一分钱安全有回报。" id="description">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <!-- start 解决缓存 -->
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <!-- end 解决缓存 -->
  <meta name="format-detection" content="telephone=no"> <!-- 解决浏览器自动显示手机号问题 -->
  
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>恒大金服</title>
  <script src="${staticPath}/scripts/jquery/jquery-1.11.1.min.js"></script>
</head>  
<body>
</body>  
</html> 

</code> 


  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">  
  <meta name="apple-mobile-web-app-capable" content="yes">    <!-- 表示去掉状态栏和菜单栏-->  
  
  各种浏览器对应的UserAgent http://www.cnblogs.com/zhaoran/p/4264744.html