1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > php安卓和苹果兼容问题 javascript - 一个简单的H5页面在安卓手机上能跑 在苹果手

php安卓和苹果兼容问题 javascript - 一个简单的H5页面在安卓手机上能跑 在苹果手

时间:2018-06-25 15:42:17

相关推荐

php安卓和苹果兼容问题 javascript - 一个简单的H5页面在安卓手机上能跑 在苹果手

最近调用百度翻译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页面在安卓手机上能跑 在苹果手机上和谷歌浏览器上却出错。...

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。