最近调用百度翻译API做了一个翻译小demo,css方面用了bootstrap,然后自己稍微改了一点样式。
js部分很简单,按照百度api文档的规则生成一个 url地址+查询字符串,然后再通过get方法发送到服务器,取得返回值,从里面获得翻译结果,显示在页面上,中间还用了一个jsonp跨域请求。
github地址:https://zdaoyang.github.io/tr...
但是在谷歌浏览器上打开会提示这样的错误(无法选择语言,也无法成功翻译)
同时,安卓手机端访问正常,苹果手机端访问不正常。(如果各位中谁是苹果手机的可以点开上面的链接试试看)
在网上看到相关的兼容性文章,但是不知道自己的问题具体出在哪,不知道是bootstrap的问题还是js的问题,或者还是安全性的问题,很迷茫,还望各位多多指教。不胜感激!
最后附上完整代码:
translateApp
p.out{
width: 100%;
height: 178px;
border-radius: 0.25rem;
padding: .5rem .75rem;
font-size: 1rem;
color: #464a4c;
border: 1px solid rgba(0,0,0,.15);
}
button{
margin: 10px 0 10px 5px;
}
ul{
display: block;
width: 250px;
padding-left: 50px;
}
ul > li{
padding-left: 15px;
}
span{
display: inline-block;
cursor: pointer;
padding: 0 0 16px 0 ;
}
span:nth-child(2){
padding-left: 35px;
}
span:not(.text-info):hover{
font-weight: bold;
}
翻译为:
英语
中文英语日语韩语法语西班牙语泰语俄语德语意大利语
翻译
var lang = "en"; //默认为英语
//第一步 选择目标语言
$("span").on("click",function(e){
$("button.target-language").html(e.target.innerHTML);
lang = e.target.dataset.lang;
});
//第二步 生成url后面的data部分
function createData(){
var q = $("textarea").val();
var salt = Date.now();
var str = "0630000061038" + q + salt + "nfAcgTO_Ub23sQR86MyW";
var sign = md5(str); //用md5算法生成sign
var data = "q=" + q +"&from=auto&to=" + lang + "&appid=0630000061038&salt=" + salt + "&sign=" + sign;
return data;
}
//第三步,点击翻译就发送get请求,并取得返回的翻译结果。
$(".btn-success").on("click",function(){
var url = "https://fanyi-/api/trans/vip/translate?";
$.ajax({
type: "GET",
async: true,
url: url,
data: createData(),
dataType: "jsonp",
jsonp: "callback",
success: function(json){
$("p.out").html(json.trans_result[0].dst);
},
error:function(){
alert("翻译出错,请重试");
}
});
});
php安卓和苹果兼容问题 javascript - 一个简单的H5页面在安卓手机上能跑 在苹果手机上和谷歌浏览器上却出错。...