前言
在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);
};
网友评论