WEB前端资源代码：问题篇

1.web扫码登录怎么实现，思路?

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

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

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

整体思路：

  • 1.前端调用后台生成二维码的API，获取到二维码图片和所包含的信息（通常是一个唯一ID）
  • 2.前端检测（通过轮询或者websock，自己选择）是否有手机扫码，通过调用后台接口API，参数为上面的唯一ID
  • 3.手机扫描二维码登陆，手机端可以获取到二维码里的信息ID，带上当前登陆用户ID和二维码里的ID调用后台接口。后台存储这个二维码的数据，加上登录用户信息，当前台调用API时，给返回登录成功。
  • 4.前端获取到登录成功，进行跳转

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

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <body>
        <div id="divCon">
            <img src="" id="QrCodeImg" />
        </div>
    </body>
    <script type="text/javascript">
        $(document).ready(function() {
            var uuid = 131422035;
            function validateLogin(){
                $.get("/walletadminV2/api/testServlet/testLogin?uuid=" + uuid , function(data, status) {
                    if(data == ""){
                        validateLogin();
                    }else{
                        var obj = eval("(" + data + ")");
                        alert("登录成功了:" + obj.uname);
                    }
                });
            }  

            validateLogin();
        });
    </script>
    </html>

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

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

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

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

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

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

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

修改后的代码

 <input type ="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"/>

再试试，果然妥妥的了！

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

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

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

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

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

先看下这段代码：

<?xml version="1.0"?>
<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

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

看淘宝的使用方式：

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

<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
<allow-access-from domain="*.taobao.com" />
<allow-access-from domain="*.taobao.net" />
<allow-access-from domain="*.taobaocdn.com" />
<allow-access-from domain="*.allyes.com" />
</cross-domain-policy>

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

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

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

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

如： Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{
  ‘Access-Control-Allow-Origin‘: ‘*‘,
}
// HTML
<meta http-equiv="Access-Control-Allow-Origin" content="*">
// 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‘： 

<script>
    $.ajax({
        url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
        type:‘GET‘,
        dataType:‘JSONP‘,  // 处理Ajax跨域问题
        success: function(data){
            $(‘body‘).append( "Name: " + data );
        }
    });
</script>

当然请求方式只能是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防止弹出新页面，但在火狐下无效？

如题所示：

<p id="p" draggable="true" ondragstart="dragStart(event)">sss</p> //ps:不加红显示不了p标签。
<div ondragover="dragOver(event)" style="width:100%;height:50px;"></div>
<script>
function dragOver(e){
stopDefault(e);
}
function stopDefault(e) {
var event = e||window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
</script>

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

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

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

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

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

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

题主用jquery接收

<input name="c_pic" id="c_pic" type="file" class="file">

用的方法是：

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调用：<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=dGg7NKEkMCp8j1pWHCHZ3nhk"></script>

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

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

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

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

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

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

9.网页中插入FLASH（swf文件），并且让Flash不遮挡HTML元素

文章地址：http://www.cnblogs.com/moqiutao/p/4754232.html

10.如何禁止 iPhone Safari video标签视频自动全屏？

文章地址：http://www.cnblogs.com/moqiutao/p/4830438.html

11.JS无法获取display为none的隐藏元素的宽度和高度的解决方案

文章地址：http://www.cnblogs.com/moqiutao/p/6508237.html

12.audio元素和video元素在ios和andriod中无法自动播放

    原因： 因为各大浏览器都为了节省流量，做出了优化，在用户没有行为动作时（交互）不予许自动播放；

    /音频，写法一
    <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

    //音频，写法二
    <audio controls="controls">
        <source src="music/bg.ogg" type="audio/ogg"></source>
        <source src="music/bg.mp3" type="audio/mpeg"></source>
        优先播放音乐bg.ogg，不支持在播放bg.mp3
    </audio>

    //JS绑定自动播放（操作window时，播放音乐）
    $(window).one(‘touchstart‘, function(){
        music.play();
    })

    //微信下兼容处理
    document.addEventListener("WeixinJSBridgeReady", function () {
        music.play();
    }, false);

    //小结
    //1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常；
    //2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间；
    //3.注意不要遗漏微信的兼容处理需要引用微信JS；

原文地址：https://www.cnblogs.com/moqiutao/p/9872077.html

时间： 2024-11-10 04:31:00

WEB前端资源代码：问题篇的相关文章

WEB前端资源代码：面试篇

1.JS找字符串中出现最多的字符 例如:求字符串'nininihaoa'中出现次数最多字符 方法一: var str = "nininihaoa"; var o = {}; for (var i = 0, length = str.length; i < length; i++) { var char = str.charAt(i); if (o[char]) { o[char]++; //次数加1 } else { o[char] = 1; //若第一次出现,次数记为1 } }

WEB前端资源代码：CSS篇

css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个.其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个.其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小, 即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工

WEB前端资源代码：常用篇

对象的判空 将json对象转化成json字符串,然后进行判断是否等于字符串'{}',直接写{}无法进行判断 let isObject = {}; console.log(JSON.stringify(isObject) == '{}'); 使用for循环来判断,若不为空,则返回false let listObject = { a: 1, b: 3, c: 4 }; function isEmptyObject() { for(let key in listObject) { return fal

WEB前端资源代码：学习篇

1.JS设计模式片段 Function.prototype.addMethod = function (name,fn) { this.prototype[name] = fn; return this; }; var Methods = function(){}; Methods.addMethod('checkName',function () { //验证姓名 console.log('姓名'); }).addMethod('checkEmail',function () { //验证邮箱

WEB前端资源代码：PS记录

1.相邻2个层合并的快捷键方法:先选择上面的一个层,再按ctrl+e. 2.合并一个组内的多个层或组:在该组单击右键,选择“转换为智能对象”,然后可对其进行其它操作,比如:截取该组的为一张图片:ctrl+"鼠标左点击该组". 3.复制一个层,对该层设置前景色和背景色设置:背景色快捷键 :Ctrl+Delete:前景色快捷键Alt+Delete. 4.移动一张jpg图片内的文字或者里面的小图片等内容:首先选中“要移动的内容”,第二,新建新层,然后点击 “移动工具”,点击左右箭头移动内容,

好程序员web前端分享HTML基础篇

好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基础 学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4.HTML基本结构和HTML语法 5.HTML常用标记 一.本专业介绍.HTML相关概念,HTML发展历史 本专业介绍 移动前端/WEB前端

HBuilder：一个不错的web前端IDE(代码编辑器)

Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery JqueryMobile 甚至还支持Phonegap.但是对于JS的支持到了有的程度而已,语法高亮.语法提示仅此而已了.我们需要的是什么呢? 1.高度匹配的语法提示,例如我定义了哪些空间,语法提示至少可以自动提示控件的ID,控件对应的方法函数,自定义函数的语法提示. 2.JS与HTML的大纲导航 3.J

转 web前端性能分析--原理篇

转自http://blog.csdn.net/five3/article/details/7686715 web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素.那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧. 页面的请求过程: 1.浏览器的url请求2.递归寻找DNS服

转 WEB前端性能分析--工具篇

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn