JavaScript 跨域通信的几种方法

由于同源策略(Same Origin Policy)的限制,JavaScript 中两个不同域的页面是无法互相访问数据的,这是出于安全的考虑,所谓同源,是指同一协议、同一域名、同一端口,只有这三者都相同,两个页面才可以互相访问各自的数据。协议是指 httphttpsftp 等,端口平常都是省略的,在 http 中默认均为 80 端口,https443 端口。

注意“同一域名”,是指主域和子域都必须相同。例如 www.a.com 的页面中嵌入了一个 one.a.com 的 iframe,那么就受到同源策略限制。a.com 和 one.a.com 也不视为同一域名。这一类情况比较容易解决,方法就是修改 document.domain

设置 document.domain

只要两个页面的 document.domain 相同,那么 JavaScript 就可以互相访问数据。document.domain 也不是可以随意修改的,只能在同一个主域内,例如 one.a.com 可以设置自己的 document.domaina.com,不能改为 b.comtwo.a.com。并且一旦改为 a.com,就无法再设置成 one.a.com。所以只要在两个页面中都加入下面语句,就可以用 JavaScript 互相访问了:

document.domain = "a.com";

如果是不同主域的两个页面,可以使用的方法有:

JSONP

JSONP 不需要 XHR,原理其实就是创建 script 元素,因为 script 有一个很爽的地方就是不受同源策略的限制,脚本的 src 可以来自任何域名。JSONP 与一般 JSON 请求的区别是,要在 URL 添加一个参数 callback=foo,后面跟上回调函数名,回调函数用来处理响应数据。被请求页面返回的内容形如 foo({ ... }),里面包裹的是 JSON 数据。jQuery 中有一个很方便的函数 jQuery.getJSON
阅读全文 »

使用 JavaScript 获取视口和文档高度

每个 DOM 节点都具有三个属性可以用来获取高度:

clientHeight content area + padding
offsetHeight border + content area + padding
scrollHeight 没有滚动条(内容展开)时的高度

如何使用这三个属性来获取浏览器视口以及文档的高度呢?放上我在各个浏览器中测试的结果。

测试浏览器有 IE6-8、Firefox、Chrome 以及 Opera(Presto)。Chrome,Safari 和新版 Opera 同是 WebKit 引擎,结果可以互相参考。以下 bodyhtml 分别表示 document.bodydocument.documentElement

html.clientHeight

在各浏览器中,均返回视口高度。

html.offsetHeight

返回 <html> 元素的高度,可以理解为文档高度,前提是没有给 <html> 元素设置 heightIE6-8 中还是返回视口高度。

html.scrollHeight

总是返回文档高度。在 Firefox、Opera、IE8 中,返回文档高度和视口高度中较大的那个。

body.clientHeight 和 body.offsetHeight

返回 <body> 元素的高度(近似于文档高度),如果 <body> 设置了 height,则返回设定的值(IE6 仍然返回 <body> 内元素的总高度)。

body.scrollHeight

总是返回文档高度。在 WebKit 中,返回文档高度和视口高度中较大的那个。
阅读全文 »

console.log 介绍

console.log 可以向控制台中输出信息,经常用作调试。语法格式:

console.log(object [, object, ...])

此方法与另外两个方法 console.debugconsole.info 的功能相同。其中被输出的对象可以是任何种类,如果传入了多个,它们会以空格连接。第一个参数中可以包含格式限定符,类似于 C 语言 printf 函数的格式限定符。

格式限定符 说明
%s 字符串
%d 或 %i 整数
%f 浮点数
%o Chrome:以 DOM 对象显示,可以查看子节点结构
Firefox:以普通 JavaScript 对象显示,可以查看属性方法
%O (仅 Chrome)以普通 JavaScript 对象显示,可以查看属性方法
%c 根据提供的 CSS 样式来显示

示例

var name = "Jack", age = 36;
console.log("%s 今年 %d 岁了。", name, age);
// 输出结果: Jack 今年 36 岁了。

var name = "Jack", thing1 = "房子", thing2 = "车子", thing3 = "女朋友";
console.log("我是 %s,我有:", name, thing1, thing2, thing3);
// 输出结果:我是 Jack,我有: 房子 车子 女朋友

使用 %o%O 显示对象:

console.log("%o, %O", document.body, document.body);

输出结果(Chrome 中):
阅读全文 »

flight