网页开发实践总结

前言

在iOS原生开发之余也会写一些网页，尤其在最近一个项目中使用JavaScriptBridge与网页交互中涉及比较多，其中一个场景时由于网页需要调用原生的功能，导致在开发中如果只在Chrome里开发调试不在APP里面调试就没法进行，导致开发效率下降很多,为此，我特地研究写了一个JSBridge桥接工具库，让网页在APP里时调用APP的方法，在APP之外的浏览器里使用JSBridge对应的方法，这样就可以无缝在APP内和APP外开发调试了，以后时机合适后会把所有内容都公布出来，其中整理的知识点如下：

1、JS实现粘贴内容到粘贴板

// 实现原理，创建一个看不见的Textarea，复制里面的内容
bridge.handlers["copyText"] = function(data,callback){
    if(data == null || data["text"] == null){
        return;
    }
    var txt = data["text"];
    var copyDiv = document.createElement('div');
    copyDiv.innerHTML = "<textarea id='copyJsTextToBoardContents' style='height:0px;'>" +
        data["text"] +"</textarea>"; 
    document.documentElement.appendChild(copyDiv);
    var e=document.getElementById("copyJsTextToBoardContents");//对象是contents 
    e.select(); //选择对象 
    try{
        document.execCommand("Copy"); //执行浏览器复制命令
        setTimeout(function() {       
        document.documentElement.removeChild(copyDiv) }, 1);
           if(callback){
               callback("复制成功");
           }
       }
     }catch(e){
      if(callback){callback("复制失败");}
     }
 }   

2、展示想Android那样的Toast

bridge.handlers["showToast"] = function(data,callback){
            if(data == null || data["text"] == null){
                data = {"text":"    "};
            }
            var toastDiv=document.getElementById("toastDivId");
            if(toastDiv != null){
                document.documentElement.removeChild(toastDiv);
            }
            toastDiv = document.createElement('div');
            toastDiv.id = "toastDivId";
                //设置div的属性
                toastDiv.innerHTML = "<div style='background:#000;border-radius:5px;padding:5px;font-size:10px;color:#Fff;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6'>" +
                data["text"] +
                        "</div>"; //设置显示的数据，可以是标签．
                toastDiv.style.cssText="min-width:10px;max-width:200px;margin:0 auto;background:white;position:absolute;left:40%;top:50%;";
                document.documentElement.appendChild(toastDiv);
                setTimeout(function() { 
                    var toastDiv2=document.getElementById("toastDivId");
                    if(toastDiv2 != null){
                        document.documentElement.removeChild(toastDiv2);
                    }
                    }, 1500);
};

禁止Safari将数字识别成电话号码,增加特殊效果