LyChi's Blog—Wow,is a frontend journey again！

我们继续前面一节探讨移动平台前端开发中的一些技巧。这一节可能会包含一些PhoneGap 1.5方面的开发。
21、解决phonegap加载外部资源报错问题
当你使用Eclipse做Phonegap混合开发时，在html页面加载外部资源时会有报错消息，解决方案非常简单，你需要为phonegap添加一个外部url白名单即可，你可以在/res/xml/cordova.xml文件中添加，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<cordova>
    <access origin="http://127.0.0.1*"/>
    <access origin="http://*.jquery.com"/>
    <log level="DEBUG"/>
</cordova>

22、解决webkitTransitionEnd事件响应多次
当你为一个元素指了-webkit-transition-property:all时，并且为该属性注册了webkitTransitionEnd事件，那么在动画结束后该元素的webkitTransitionEnd事件有可能会响应多次！webkitTransitionEnd事件会在当前元素的所有支持transition的css属性上注册一次，也就是说如果你指定了当前元素的3个css属性执行过渡动画，那么webkitTransitionEnd事件就会响应3次，看代码：

<style type="text/css">
form{
				background:red;
				-webkit-transition:all ease 0.5s;
				width:300px;
			}
			form.abc{
				background:blue;
				width:1000px;
			}
</style>

以上代码我指定了-webkit-transition-property为all，并且配置了background、width属性，那么webkitTransitionEnd事件将会响应2次，但很多的时候，我会只需要回调一次就行了，如何解决呢？
你可以通过webkitTransitionEnd事件的事件对象中的propertyName属性(event.propertyName)解决这一问题:

var form = document.querySelector('#form');

    form.addEventListener('click', function(){
        this.className = 'test';
        var callback = function(e){
            alert('transition finished.')
            if (e.propertyName == 'width') {
                this.removeEventListener('webkitTransitionEnd', callback, false);
            }
        };
        this.addEventListener('webkitTransitionEnd', callback, false);
    }, false);

23、PhoneGap 1.5 Android包Eclipse报错消息DroidGap Cannot be resolved to a type
PhoneGap 更新至1.5后，改名为Cordova，所以你要你是1.5＋版，你的phonegap字段都应该修改为Cordova，所以phonegap官网的App.java示例代码中的import org.apache.phonegap.*应修改为import org.apache.cordova.*。很遣憾这一点在phonegap官方文档中都没有说明（截止我发稿时）。
24、解决phonegap中文乱码问题
在head标签内加入以下meta标签

<meta charset="utf-8" />

引入的javascript，可以在script标签中添加charset=”utf-8″属性。
24、解决eclipse对HTML5文档的校验
HTML5的新规范现在仍处于草案阶段，所以很多编辑器中的HTML代码提示功能及标签自动校验功能在编写HTML5文档会给开发者带来痛苦，比如eclipse，或者eclipse中的aptana开发插件的HTML标签校验是非常严禁的，且现在他们都不支持对HTML5新标签的识别，因此只要你的html文档存在错误,eclipse就无法运行应用。我们可以通过Eclipse -> Preference -> Aptana(如果你有安装Aptana插件) -> Editors -> HTML -> validation，取消Tidy Html Validator，然后Eclipse -> Preference -> Web -> HTML Files -> Validation，然后在elements标签中忽略对HTML标签的校验。
25、如何阻止客户端（浏览器）对HTML5表单的校验？
有时候开发者可能又想使用HTML5的新表单特性，但是呢又暂不想使用HTML5的表单自动校验功能(毕竟暂时还不太成熟)，怎么办呢？我们不妨在该表单上添加novalidate属性

<form action="#" method="post" novalidate>

可阅读http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate
25、如何获取移动设备的分辩率
有时候我们可能需要根据不同的设备分辩率做不同的业务处理，我们可以通过 devicePixelRatio

var ratio = window.devicePixelRatio,
    width = window.screen.width * ratio;

PHP 处理：

  if(isset($_COOKIE['pixel_ratio'])){
      $ratio = $_COOKIE['pixel_ratio'];
      if($ratio >= 2){
          echo '高分辩率设备';
      }else{
          echo '标准分辩率设备';
      }
  }

26、如何在 touchmove 事件中找到真实的手指下的节点?
通过 document.elementFromPoint，详见：https://developer.mozilla.org/en/DOM/document.elementFromPoint

27、如何消除Android和iOS点击元素时的边框？
可以尝试添加以下 css3 样式：-webkit-tap-highlight-color:rgba(0,0,0,0);

28、Android OS 键盘弹出会触发 window.onresize 事件
可以考虑使用 window.addEventListener(‘orientationchange’,callback,false) 解决

29、PhoneGap 不允许使用 file 协议加参数跳转页面
可以通过页面代理的方式解决，比如点击某个按钮将需要传递到下个页面的数据保存到本地，然后跳转到代理页面，在代理页面创建一个 iframe 标签，
js 获取到刚刚保存的数据，然后把跳转地址及数据写到 iframe 的 src 中即可。