常见问题解决

1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
方案一:
inputOnFocus(e){
    setTimeout(() => {
        e.target.scrollIntoView(true);
        // true:元素的顶端将和其所在滚动区的可视区域的顶端对齐; false:底端对齐
    }, 200);
}
方案二:
var timer;
// 输入框获得焦点时,将元素设置为position:static,设置timer
inputOnFocus(e){
    e.target.style.className = ‘input input-static‘;
    timer = setInterval(function(){
        document.body.scrollTop = document.body.scrollHeight
    },100)
}
// 输入框失去焦点时,将元素设置为 position:fixed,清除timer
inputOnBlur(e){
    e.target.style.className = ‘input input-fixed‘;
    clearInterval(timer)
}
注释:缺点就是输入的时候不能滑动页面
2跨域的解决办法
1:JSONP方法
原理:利用<script>元素的开放策略,得到从其他来源动态产生的JSON数据,需要对方的服务器做支持
优缺点:兼容性比较好 缺点只支持GET方法
使用:(将回调函数fn作为参数传递给目标地址)
<script type="text/javascript">
    function fn(data) {
        alert(data.msg);
    }
</script>
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=fn"></script>
目标地址将传递进来的函数与需要返回的数据拼接成一个字符串.
fn({ msg:‘this is json data‘})
注释:jQuery中JSONP形式都是GET请求和异步,不存在同步情况,切默认会清楚缓存
$.ajax({
    url:"http://crossdomain.com/jsonServerResponse",
    dataType:"jsonp",
    type:"get",//可以省略
    jsonpCallback:"fn",//->自定义传递给服务器的函数名,而不是使用jQuery自动生成的,可省略
    jsonp:"jsonp",//->把传递函数名的那个形参callback变为jsonp,可省略
    success:function (data){
        console.log(data);
    }
});

2:CORS方法
原理:CORS通信过程都是浏览器自动完成的,浏览器一旦返现AJAX请求跨域,就会自动添加一些附加的信息头,
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信.
优缺点:优点在于功能更加强大支持各种HTTP Method,缺点是兼容性不如JSONP
使用:
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");
//在服务器端设置同源策略地址
router.get("/userlist", function (req, res, next) {
    var user = {name: ‘Mr.Cao‘, gender: ‘male‘, career: ‘IT Education‘};
    res.writeHeader(200,{"Access-Control-Allow-Origin":‘http://localhost:63342‘});
    res.write(JSON.stringify(user));
    res.end();
}); 

3:WebSocket
 
4:ios不能兼容时间格式中间是横线bug
new Date(time.replace(/-/g, ‘/‘)).getTime()
5:在H5页面添加一张图片的时候,发现图片无缘多出一个下边距,切并没有元素占据该区域,解决办法是将图片设置为块级元素:dispaly:block
6:火狐浏览器会有一套自己的按钮的边距计算规则
解决办法:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
    padding:0;
}
7:H5拨打电话问题解决记一次移动端开发H5拨打电话
常见的H5唤起系统拨打电话的使用方法
<a class="none" href="tel:4008196968">拨打电话</a>

//如果我们正常的在屏幕点击a标签确实可以进行拨打电话,但是业务需求导致,我们需要使用js代码控制,当我使用jquery触发a标签的点击事件才发现
并没有如我想要的进行拨打电话;

解决办法:触发a标签里面的文字,通过JavaScript的冒泡原理,由浏览器去触发事件进行电话拨打
<a class="none" href="tel:4008196968"><span class="js_lijiWenYi">立即问医</span></a>

后记:看过网上相关资料都说,当我们点击a标签的超链接的时候,实质是点击a标签的文字,从而才打到跳转的目的,如果单纯点击a标签,是不会进行跳转,暂时还没有测试

原文地址:https://www.cnblogs.com/panrui1994/p/9890019.html

时间: 2024-11-14 12:20:07

常见问题解决的相关文章

附:02 eclipse常见问题解决方法

一.出现"Location of the Android SDK has not been setup in the preferences" 当新建一个工作区间时,android项目时出现"Location of the Android SDK has not been setup in the preferences"时,是因为没有设置SDK的位置,window->preferences->android->SDK Location里面选择你的

[Gradle] Gradle 构建 android 应用常见问题解决指南

转载地址:http://www.cnblogs.com/youxilua/p/3348162.html 1: 使用最新的gradle android插件 以前我们写的时候会这么写 dependencies { classpath 'com.android.tools.build:gradle:0.5.0' } 不过,由于android gradle 插件的开发还是很活跃的,而且目前而言,可能还存在一些我们不知道的坑,但是,别人踩过,后边,官方修复,为了不踩坑,我建议android gradle

mysql 的常用命令及常见问题解决方法

运行sql C:\Users\Martin>mysql -uroot -pyang cdm_db <d:/cdm_db.sql 运行sql mysql>source /tmp/terminal.sql; mysql忘记密码: mysqladmin -uroot flush-privileges password "newpassword" mysql的select into file命令 SELECT a,b,a+b INTO OUTFILE '/tmp/result

android导入项目常见问题解决

android导入项目常见问题解决 标签: androideclipseapipropertiescompilertools 2011-12-25 21:52 11268人阅读 评论(7) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 初学android,最近在使用现成的代码的过程中发现直接导入的eclipse项目大都不能直接使用,总结下出现的问题和解决方案: 1.project.properties或default. Properties的问题 有的项目这两个问题不能在ec

kvm编译安装及常见问题解决

一.KVM的编译安装 1.安装基本系统和开发工具 1.1 编译内核 mkdir /root/kvm cd /root/kvm wget http://www.kernel.org/pub/linux/kernel/v3.x/linux-3.5.tar.gz tar -zvxf linux-3.5.tar.gz -C /usr/src cd /usr/src/linux-2.6.34.4 make menuconfig vi .config 增加 CONFIG_SYSFS_DEPRECATED_V

Python常见问题解决记录1-Non-ASCII character &#39;\xe7&#39;错误

1.编译运行出现错误:SyntaxError: Non-ASCII character '\xe7' in file .. , but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details 问题原因:Python在默认状态下不支持源文件中的编码所致 解决办法:按照错误建议网址查看http://www.python.org/peps/pep-0263.html 1.文件头部添加如下注释码: # codi

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl化 2 2.3. 依赖注入 2 2.4. 指令 2 3. 手动绑定数据spa方式以及与ajax 与dwr的集成 2 4. 格式化数据 2 4.1. 多字段组合格式化 3 4.2. 输出html 4 5. 输出作为函数参数调用 4 6. 加载完成事件 5 7. 常见错误 5 7.1. Atitit.a

springmvc环境搭建以及常见问题解决

1.新建maven工程 a)  打开eclipse,file->new->project->Maven->Maven Project b)  下一步 c)   选择创建的工程为webapp,下一步 d)   填写项目的group id和artifact id.一般情况下,group id写域名的倒序,artifact id写项目名称即可.最后点完成. e)   最初建好后,项目目录结构如下 f)   一般的项目目录中,还有src/main/java,src/main/test/ja

Web Deploy发布网站及常见问题解决方法(图文)

Web Deploy发布网站及常见问题解决方法(图文) Windows2008R2+IIs7.5 +Web Deploy 3.5 Web Deploy 3.5下载安装 http://www.iis.net/downloads/microsoft/web-deploy 点 Install this extension 也可直接点下面链接 http://go.microsoft.com/?linkid=9817356 全部 点下一步进行安装 直至完成, Web Deploy 安装完毕后,便可进行下一

零基础Centos6搭建Git服务器,及常见问题解决

1.编译安装git 1$ wget http://kernel.org/pub/software/scm/git/git-1.7.3.tar.gz #目前最新版本 2$ tar -xzvf git-1.7.3,tar.gz #解压出来 3$ cd git-1.7.3 #进入目录 4$ yum install  -y gettext-devel expat-devel curl-devel zlib-devel openssl-devel #-y是默认自动安装,安装编译时用到的东东 5$ ./co