美文网首页
网页开发实践总结

网页开发实践总结

作者: 独孤流 | 来源:发表于2018-01-11 15:16 被阅读59次

    前言

    在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将数字识别成电话号码,增加特殊效果

    相关文章

      网友评论

          本文标题:网页开发实践总结

          本文链接:https://www.haomeiwen.com/subject/kzzznxtx.html