十二 23

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题

百度源代码如下

可以打开百度,右键查看源码看下!我们可以看下文件头是否存在这样一行代码!

这句话的意思是强制使用IE7模式来解析网页代码!

在这里送上几种IE使用模式!

<meta http-equiv="X-UA-Compatible" content="IE=8">
2. Google Chrome Frame也可以让IE用上Chrome的引擎:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />
3.强制IE8使用IE7模式来解析

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"><!– IE7 mode –>
//或者
<meta http-equiv="X-UA-Compatible" content="IE=7"><!– IE7 mode –>
4.强制IE8使用IE6或IE5模式来解析

<meta http-equiv="X-UA-Compatible" content="IE=6"><!– IE6 mode –>

<meta http-equiv="X-UA-Compatible" content="IE=5"><!– IE5 mode –>
5.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如:

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
二.设定网站服务器以指定预设兼容性模式

如果服务器是自己的话,可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。

录入,下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

另外还有一起其他的解决方案,例如google的

ie7 – js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准,支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题,并使 得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式(推荐)

使IE5,IE6,IE7兼容到IE8模式

使IE5,IE6,IE7,IE8兼容到IE9模式

解决PNG显示问题

只需将透明png图片命名为*-trans.png

需要注意的是:此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。
三、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
创建html5时发现这么一句话,不知其什么意思,百度如下:
这 样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果没安装GCF,则使用最高版本的IE内核进行渲染。Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

十二 14

ajax已阻止跨源请求 原因:CORS 头缺少 ‘Access-Control-Allow-Origin’

 

js错误提示:

ajax已阻止跨源请求 原因:CORS 头缺少 'Access-Control-Allow-Origin'

使用PHP语言必须授权允许其它域下ajax跨域请求

在ajax需要请求的php页面(服务器端)的最开始部分就要加入如下代码:

 

十二 12

百度地图API开发指南与使用方法

简介

JavaScript API功能介绍

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。

基本地图功能:展示(支持2D图、3D图、卫星图)、平移、缩放、拖拽等。

地图控件展示功能:可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件,并可以设置各类控件的显示位置。

覆盖物功能:支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等;开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。

工具类功能:提供经纬度坐标与屏幕坐标互转功能;开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能。

定位功能:支持IP定位及浏览器(支持html5特性浏览器)定位功能。

右键菜单功能:支持在地图上添加右键菜单。

鼠标交互功能:支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。

图层功能:支持重设地图底图、地图上叠加实时交通图层或自定义图层功能。

本地搜索功能:包括根据城市、矩形范围、圆形范围等条件进行POI搜索;且支持用户自有数据的检索。

公交检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;检索结果支持便捷、可换乘、少步行、不乘地铁四种方案。

驾车检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;返回最短时间、最短距离、避开高速的驾车导航结果;且提供计算打车费用服务。

步行导航:提供步行导航方案。

逆/地理编码:支持百度坐标与地址描述信息之间的转换服务。

个性化数据展示功能:用户自有数据存储到LBS.云后,JavaScript API可以提供以麻点图形式展示自有数据功能。

面向的读者

API是提供给那些具有一定JavaScript编程经验和了解面向对象概念的读者使用。此外,读者还应该对地图产品有一定的了解。

您在使用中遇到任何问题,都可以通过API论坛反馈给我们。

坐标转换

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。

坐标转换、批量坐标转换示例详见JavaScript API示例【地图示例_坐标换算】。

版本说明及申请API ak

为了统一平台服务的配额管理,JavaScript API在新版本引入ak机制。JavaScript API v1.4及以前版本无须申请密钥(ak),自v1.5版本开始需要先申请密钥(ak),才可使用,超出ak配额部分,可以发送邮件进行申请。

地址:

当权限验证(ak)失败时,会报如下错误:

js-ak-failure

验证失败的可能原因包括:

尚未在API控制台申请ak,即’…ak=’;

密钥设置错误,如E4805d16520de693a3fe707cdc962045为正确的ak,但是设置时输入的ak为E4805d16520de693a3fe707cdc962045xx;

密钥未通过白名单,如下图的ak在非baidu.com域名下会报错。

js-ak-refer

API控制台关闭JavaScript API时会报错;

jsapi1

当API升级后,如果已有接口在使用、命名等方面发生了变化,我们会为其增加一个新的版本号,这不会对您现有的应用造成任何影响。如果升级只是修复一些bug或者在不影响现有功能的前提下增加接口、改善性能,则版本号不会发生变化。您可以在更新日志页面查看版本的变化。

获取JavaScript API服务方法

自JS APIv1.5之后,最新版本为2.0,您需要首先申请密钥(ak),才可成功加载API JS文件。ak的使用方法如下:

其中参数v为API当前的版本号,目前最新版本为2.0。在1.2版本之前您还可以设置services参数,以告知API是否加载服务部分,true表示加载,false表示不加载,默认为true。

地图API是由JavaScript语言编写的,您在使用之前需要通过<script>标签将API引用到页面中:

使用V1.4及以前版本的引用方式:

使用V2.0版本的引用方式:

其中参数v为API当前的版本号,目前最新版本为2.0。在1.2版本之前您还可以设置services参数,以告知API是否加载服务部分,true表示加载,false表示不加载,默认为true。

开发移动平台上的地图应用

API自1.1版本起开始支持iPhone、Android这样的移动平台。用户通过手机浏览器就可以访问由地图API创建出来的应用。移动平台的屏幕尺寸通常比PC或笔记本要小,操作方式也有所不同。为了更好的在手机浏览器上展示地图,我们有如下建议:

将地图容器高设置为100%,使其充满整个屏幕,或者您也可以计算浏览器窗口的大小并进行设置。

添加下面的meta标签: <meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。

您可以参考 Apple’s Developer documentationAndroid documentation 获得更多信息。

js-apiv14-phone

移动端开发具体实现请参考相关下载_示例代码提供的Demo源码。

异步加载

JavaScript API支持异步加载,您可以在引用脚本的时候添加callback参数,当脚本加载完成后callback函数会被立刻调用。请参考下面的使用示例:

兼容性

浏览器:IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome

操作系统:Windows、Mac、Linux

移动平台:iPhone、Android

获取技术支持途径

如果您在使用百度地图API中遇到问题,请尝试通过以下途径解决:

确认您使用了正确的地图API地址。

访问百度地图API论坛,查找相关问题的帖子,或者将您的问题发布到贴吧中。

查看常见问题

加入百度HI群
Continue reading

十二 10

JS判断数据类型常用方法_js调试

如何判断js中的数据类型:typeof、instanceof、 constructor、 prototype方法比较

如何判断js中的类型呢,先举几个例子:

var a = “iamstring.”;

var b = 222;

var c= [1,2,3];

var d = new Date();

var e = function(){alert(111);};

var f = function(){this.name=”22″;};

最常见的判断方法:typeof

alert(typeof a)   ————> string

alert(typeof b)   ————> number

alert(typeof c)   ————> object

alert(typeof d)   ————> object

alert(typeof e)   ————> function

alert(typeof f)   ————> function

其中typeof返回的类型都是字符串形式,需注意,例如:

alert(typeof a == “string”) ————-> true

alert(typeof a == String) —————> false

另外typeof 可以判断function的类型;在判断除Object类型的对象时比较方便。

判断已知对象类型的方法: instanceof

alert(c instanceof Array) —————> true

alert(d instanceof Date)

alert(f instanceof Function) ————> true

alert(f instanceof function) ————> false

注意:instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。

根据对象的constructor判断: constructor

alert(c.constructor === Array) ———-> true

alert(d.constructor === Date) ———–> true

alert(e.constructor === Function) ——-> true

注意: constructor 在类继承时会出错

function A(){};

function B(){};

A.prototype = new B(); //A继承自B

var aObj = new A();

alert(aobj.constructor === B) ———–> true;

alert(aobj.constructor === A) ———–> false;

而instanceof方法不会出现该问题,对象直接继承和间接继承的都会报true:

alert(aobj instanceof B) —————-> true;

alert(aobj instanceof B) —————-> true;

言归正传,解决construtor的问题通常是让对象的constructor手动指向自己:

aobj.constructor = A; //将自己的类赋值给对象的constructor属性

alert(aobj.constructor === A) ———–> true;

alert(aobj.constructor === B) ———–> false; //基类不会报true了;

通用但很繁琐的方法: prototype

alert(Object.prototype.toString.call(a) === ‘[object String]‘) ——-> true;

alert(Object.prototype.toString.call(b) === ‘[object Number]‘) ——-> true;

alert(Object.prototype.toString.call(c) === ‘[object Array]‘) ——-> true;

alert(Object.prototype.toString.call(d) === ‘[object Date]‘) ——-> true;

alert(Object.prototype.toString.call(e) === ‘[object Function]‘) ——-> true;

alert(Object.prototype.toString.call(f) === ‘[object Function]‘) ——-> true;

大小写不能写错,比较麻烦,但胜在通用。

通常情况下用typeof 判断就可以了,遇到预知Object类型的情况可以选用instanceof或constructor方法

十二 09

AJAX基础知识

 

ajax( options )
ajax()提供了一大票参数,所以可以实现相当复杂的功能。

参数名 类型 描述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET”。
注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。 

function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request }

cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。
参数: XMLHttpRequest 对象,成功信息字符串。 

function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }

contentType String (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。
如果为数组,jQuery 将自动为不同值对应同一个名称。
如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。
dataType String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息
返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:“xml”: 返回 XML 文档,可用 jQuery 处理。 

“html”: 返回纯文本 HTML 信息;包含 script 元素。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。

“json”: 返回 JSON 数据 。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,

如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。 

function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }

global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)以配合默认内容类型 “application/x-www-form-urlencoded”。 

如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态 

function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc… this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc… this; // the options for this ajax request }

可以指定xml、script、html、json作为其数据类型,可以为beforeSend、error、sucess、complete等状态设置 处理函数,众多其它参数也可以订完完全全定义用户的Ajax体验。

转自:http://www.jb51.net/article/43194.htm