资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/WEB之常见工作问题总结（1-20）

WEB之常见工作问题总结（1-20）

genedna / 2258人阅读

摘要：第三种，使用格式，即在中请求参数处理跨域问题当然请求方式只能是。最后发现有网友说版本不稳定引起的，于是把百度地图回退到了，结果还真是可以了。请问在移动端页面中播放优酷里面的视频，怎样实现

1.web扫码登录怎么实现，思路 
步骤       WEB平台                手机
第1步      生成二维码
第2步     （ajax监控后台）          扫码
第3步     （ajax监控后台）          确定（后台异步通知WEB平台）
第4步      AJAX发现状态改变，登陆成功

ajax监控后台的流程：生成二维码后

setTimeout(function(){
    //AJAX请求，检测状态
},5000);

整体思路：

前端调用后台生成二维码的API，获取到二维码图片和所包含的信息（通常是一个唯一ID）

前端检测（通过轮询或者websock，自己选择）是否有手机扫码，通过调用后台接口API，参数为上面的唯一ID

手机扫描二维码登陆，手机端可以获取到二维码里的信息ID，带上当前登陆用户ID和二维码里的ID调用后台接口。后台存储这个二维码的数据，加上登录用户信息，当前台调用API时，给返回登录成功。

前端获取到登录成功，进行跳转

微信与支付宝的扫码登录是有一些区别的，微信目前是一个持续27s的长连接请求；而支付宝是持续循环的短连接请求。其实原理是一样的。

首先，前端调用二维码接口，获取图片二维码以及用户唯一表示uid，然后与服务器建立长连接请求，询问是否有用户扫码登录。

用户用APP扫码之后，会请求服务器接口，将用户信息与二维码的uid绑定，前端的长连接就可以请求到当前uid对应的用户，从而进行登录操作。
前端的长连接请求类似以下代码：

   
      
      
      
    Insert title here

问题地址：web扫码登录怎么实现，求个思路

2.解决input[type=file]打开时慢、卡顿问题

为什么在input标签类型为file上传文件时在标签中设置属性 accpet="image/*"，打开本地文件夹的速度特别慢？

经过测试发现，在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有卡顿问题

在windows里面，Firefox不卡顿，只有Chrome卡顿。

于是我决定先去掉accpet试试……
果然就没有了卡顿的问题。
那么本包在试试accpet="image/jpg"果然也不卡卡的了！！
看来问题的所在就是"image/*"

但是写accpet的原意是要想要筛选出所有图片_(:з」∠)_
那么为了实现这个需求，同时提高用户体验，只能采取枚举了

修改后的代码

再试试，果然妥妥的了！

原来是因为Chrome的SafeBrowsing功能会在上传或保存时检查文件，
如果网络连接到google的速度比较快呢，就没有什么问题。
但是如果连接比较慢，或者干脆跪掉了，那SafeBrowsing就会让Chrome挂起一段时间，直到文件检查结束或者超时

使用accept="image/png, image/jpeg, image/gif"就可以解决这个问题，因为这些MIME类型在SafeBrowsing的白名单里面，不需要检查。
但是如果用像是accept="image/*"这样的呢，就不行了，就有可能变得卡卡的。

3.浏览器拦截跨域请求处理方法

解决跨域的解决办法有多种，比如jsonp，或者apache 或者nigix里面配置，或者后端的php或者java中配置 cross orgion。

在网上搜了一圈，发现处理方式都差不多，但是我们得清楚这些到底怎么用。

先看下这段代码：

这段代码作用是啥，其实这个是解决flash跨域的解决办法。

看淘宝的使用方式：

https://www.taobao.com/crossdomain.xml

一般crossdomain.xml的位置是放到项目的根目录下。

下面举例关于字体跨域的解决方法：

直接了当了说，解决此类问题，最直接的方法就是，就是给被请求的服务器，添加HTTP头响应头，这里提供两种添加HTTP头的方法：

第一种，就是在程序中添加HTTP头：

如： Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{
  "Access-Control-Allow-Origin": "*", 
}
// HTML

// PHP
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

添加此段代码的目的很简单，也就是告诉浏览器，这个资源是运行远程所有域名访问的。当然，此处的也可以替换为指定的域名，出于安全考虑，建议将替换成指定的域名。

第二种，就是在服务器上，添加HTTP响应头。在这里，我们就以IIS6.0为例：

在被请求的网站上，设置HTTP头，添加“

//在被请求的网站上，设置HTTP头，添加
"Access-Control-Allow-Origin:*" //值为*或指定的域名。

第三种，使用JSONP格式，即在jQuery中ajax请求参数dataType:"JSONP"：

当然请求方式只能是get。

参考地址：
关于跨域策略文件crossdomain.xml文件
浏览器拦截跨域请求处理方法（同源策略不允许读取XXX上的远程资源）

4.Ajax访问后端的时候，只有IE报400错误解决办法

在请求的时候，一般在url后面都会添加一个时间戳，比如：

url:"/order/order.shtml?time="+new Date()

但是IE11却不进入这个ajax请求，在网上查了下，说IE不支持时间对象作为参数。

于是我改了一下：

url:"/order/order.shtml?time="+new Date().getTime()
5.html5的拖拽，用了preventDefault防止弹出新页面，但在火狐下无效？

如题所示：

sss
 //ps:不加红显示不了p标签。

在火狐下面还是新窗口打开一个页面。解决办法：

document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
}

问题地址：https://segmentfault.com/q/1010000004689615

6.怎么通过js获取上传的图片信息（临时保存路径，名称，大小）然后通过ajax传递给后端？

今天在论坛上看到这样一个问题，有必要编辑搜集下。

问题描述：怎么通过js获取上传的图片信息（临时保存路径，名称，大小）然后通过ajax传递给后端

题主用jquery接收

用的方法是：

var input = document.getElementById("c_pic");
input.addEventListener("change",readFile,false);

function readFile(){ 
var file = this.files[0]; 
}

题主想用ajax 的post方法把上传图片的相关信息传给后端，
接收到的file是个object file，
请问怎么转换成能够用post传递的数据格式？

当时我看到这个题目就想这还不简单，直接把file通过JSON.stringify(file)（注：stringify()用于从一个对象解析出字符串），代码如下：

var input = document.getElementById("c_pic");
input.addEventListener("change",readFile,false);

function readFile(){ 
var file = this.files[0];
var file_json = JSON.stringify(file);
console.log(file_json); //打印出来是: {}
$.post("",file_json);
}

发现打印出来的是一个空的对象：{}；有知道的麻烦告知，感激不尽！

于是换了一种思路用uploadfile插件或百度的webuploader，其中jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
如果支持html5，可以使用FormData Ajax上传也能实现的。

7.苹果手机 微信调用百度地图Javascript API 频繁闪退问题

最近在网页中调用百度地图API js大众版，但是在IOS8系统中，缩放的时候频繁闪退，安卓手机没有这个问题！

在网上查询了下，有网友回答说不要频繁的去new marker，而是初始化话一定量的marker，然后setPosition。但是我的页面中匹配当前城市 注入marker也没有几个，所以排除这答案。

最后发现有网友说版本不稳定引起的，于是把百度地图API回退到了1.5，结果还真是可以了。

百度地图API调用：

问题参考地址：http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=84541

8.怎样获取优酷站内视频的MP4格式地址，嵌入到手机页面播放（未解决）

最近的有关项目需要使用video标签播放视频，并且视频的路径src是优酷里面的视频，所以需要得到优酷里面的mp4路径才能播放。

但是在网上查了下资料，看到优酷的播放格式是一个m3u8文件。

M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。

请问在移动端页面中播放优酷里面的视频，怎样实现？

专线服务 服务器托管 web应用防火墙常见问题 工作总结 上半年工作总结 网络管理员工作总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92381.html

相关文章

  • php设计模式

    摘要：我们今天也来做一个万能遥控器设计模式适配器模式将一个类的接口转换成客户希望的另外一个接口。今天要介绍的仍然是创建型设计模式的一种建造者模式。设计模式的理论知识固然重要，但 计算机程序的思维逻辑 (54) - 剖析 Collections - 设计模式 上节我们提到，类 Collections 中大概有两类功能，第一类是对容器接口对象进行操作，第二类是返回一个容器接口对象，上节我们介绍了...

    Dionysus_go 评论0 收藏0

  • php设计模式

    摘要：我们今天也来做一个万能遥控器设计模式适配器模式将一个类的接口转换成客户希望的另外一个接口。今天要介绍的仍然是创建型设计模式的一种建造者模式。设计模式的理论知识固然重要，但 计算机程序的思维逻辑 (54) - 剖析 Collections - 设计模式 上节我们提到，类 Collections 中大概有两类功能，第一类是对容器接口对象进行操作，第二类是返回一个容器接口对象，上节我们介绍了...

    vspiders 评论0 收藏0

  • 前端每周清单半年盘点之 React 与 ReactNative 篇

    摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。 前端每周清单半年盘点之 React 与 ReactNative 篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

    Barry_Ng 评论0 收藏0

  • 前端面试之CSS总结(上)

    摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

    琛ｈ。 评论0 收藏0

  • PHP回顾之执行流程及相关概念

    摘要：通过，脚本层无需过多考虑执行的具体环境，而本身则可以让针对自己的特点给出特有实现。模式下，也只执行一次。这几个概念的关系如下网关协议，与语言无关，所以与关系也不大。总结本文简要回顾了程序的架构和执行流程，并对几个容易混淆概念做了介绍。 转载请注明文章出处：https://tlanyan.me/php-review... PHP回顾系列目录 PHP基础 web请求 cookie we...

    jsdt 评论0 收藏0

发表评论

登陆后可评论

0条评论

genedna

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<