トマト&タマゴの道

2011年12月20日星期二

Xdomain

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>cross-domain</title>
</head>
<body>
<div style="width:100%;border:1px solid green;">
  <h3>this page from :<span id="host"></span></h3>
  <input type="text" value="" id="data" /><button id="btn" onclick="send();">提交</button>
</div>

<iframe id="iframeA" src="http://example.cn/client.html" style="border:1px solid #ff6600;width:100%;height:300px;"></iframe>
<script type="text/javascript">
  document.getElementById('host').innerHTML = location.host;
  function send(){
   var val = document.getElementById('data').value;
   sendMessage(val);
  }
  (function(win, doc){
   var ifr = doc.getElementById('iframeA').contentWindow;
   var cb = function(json){
    alert(location.host+" get msg:"+json);
   };
   var sendMessage = function(){
    if(win.postMessage){
     if (win.addEventListener) {
                  win.addEventListener("message",function(e){
      cb.call(win,e.data);
     },false);
              }else if(win.attachEvent) {
                  win.attachEvent("onmessage",function(e){
      cb.call(win,e.data);
     });
              }
     return function(data){
      ifr.postMessage(data,'*');
     };
    }else{
     var hash = '';

     setInterval(function(){

      if (win.name !== hash) {
       hash = win.name;
       cb.call(win, hash);
      }
     }, 50);
     return function(data){
      ifr.name = data;
     };
    }
   };
   win.sendMessage = sendMessage();
  })(window, document);

</script>
</body>
</html>

クライアント

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>cross-domain</title>
</head>
<body>
<h3>this page from :<span id="host"></span></h3>
<input type="text" value="" id="data" /><button id="btn" onclick="send();">提交</button>
<ul>
  <li>firefox、chrome等高级浏览器采用html5 postMessage方法</li>
  <li>IE6 7等使用window.name方法</li>
  <li>支持双向跨域，在chrome 13、firefox6、IE6+测试通过</li>
  <li>window.name可以通过data加随机数方式，避免两次提交的数据相同，本例没做处理，所以如果不改变value值点击提交是不会触发alert的</li>
</ul>
<script type="text/javascript">
  document.getElementById('host').innerHTML = location.host;
  function send(){
   var val = document.getElementById('data').value;
   sendMessage(val);
  }
  (function(win, doc){
   var ifr = win.parent;

   var cb = function(json){
    alert(location.host+" get msg:"+json);
   };
   var sendMessage = function(){
    if(win.postMessage){
     if (win.addEventListener) {
                  win.addEventListener("message",function(e){
      cb.call(win,e.data);
     },false);
              }else if(win.attachEvent) {
                  win.attachEvent("onmessage",function(e){
      cb.call(win,e.data);
     });
              }

     return function(data){
      ifr.postMessage(data,'*');
     };
    }else{
     var hash = '';

     setInterval(function(){
      if(win.name!==hash){
       hash = win.name;
       cb.call(win,hash);
      }
     },50);
     return function(data){
      ifr.name = data;
     };
    }
   }
   win.sendMessage = sendMessage();
  })(window, document);

</script>
</body>
</html>

(转)HTML5之window.postMessage实现跨域传递消息

今天在了解HTML5的新特性中，发现利用window.postMessage来实现跨域方面的操作真的是很方便，故把学习的心得记录下来,方便在以后的项目中遇到能够顺利解决.

首先建立两个文件

(1)在http://h.com/Html/目录下创建window_postMessage.htm文件,该文件代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<pre>

(1)利用window.postMessage()跨域传递消息

(2)本域是http://h.com,向http://x.com/Html/webtwo.htm 传递数据

<button id="btnPassData"> 跨域传递消息</button>

</pre>

<div> //利用Iframe加载另一个域http://x.com/下的文件

</iframe>

</div>

</body>

</html>

window.onload = function() {

document.getElementById("btnPassData").onclick = function() {

var iframedom = document.getElementById("twoiframe").contentWindow;

if (typeof window.postMessage !== "undefined") {

iframedom.postMessage("Hellow,这个消息来源于http://h.com", "http://x.com");

//iframe向http://x.com/Html/webtwo.htm传递字符串消息,在下面蓝色部分看webtwo.htm如何接收传递过来的数据

}

if (window.attachEvent) {

window.attachEvent("onmessage", receiveMsg);

}

else {

window.addEventListener("message", receiveMsg, true);

}

};

var receiveMsg = function(e) {

document.title = e.origin; //获取跨域传的源

alert(e.data); //获取传递过来的数据

}

</script>

(2)http://x.com/Html/webtwo.htm下webtwo.htm页面的代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>第二个网站</title>

</head>

<body>

UserName:<input type="text" id="txtUser" value="jackie" />

<br />

Password:<input type="text" id="txtPwd" value="123" />

</div>

<br />

接受来自http://h.com域下传递过来的值

</div>

</body>

</html>

window.onload = function() {

if (window.attachEvent) {

window.attachEvent("onmessage", acceptMsg);

}

else {

window.addEventListener("message", acceptMsg, true);

}

var acceptMsg = function(e) { //该函数用来表示在window.onmessage事件触发时进行接收数据的处理

if(e.origin.indexOf("http://h.com")){ //这句的作用是排除其他非法的域名，也就是说只接收http://h.com传递过来的数据

alert(e.data) ;//webtwo.html页面接收数据

}

window.top.postMessage("Got it Thanks", "http://h.com/Html/window_postMessage.htm"); //向页面回传数据,那么在

};

</script>

总结:

(1)利用window.postMessage进行跨域传递数据时.在window.onload事件中，如果通过闭包的形式来帮顶事件接收acceptMsg 函数是不行的。

（2）window.postMessage作为HTML5的新特性，在IE8,FF3.5+,chrome,opera，safari中才支持,IE较低的版本是不支持的.

（3）window.postMessage不仅可以用在跨域传递数据，在同源策略中也可以使用.

(4) 在利用window.postMessage进行跨域传递数据时,可以利用Event.origin属性来过滤那些不合法的域名来传递数据，

(转)利用HTML5的window.postMessage实现跨域通信

由于同源策略的限制，JavaScript跨域的问题，一直是一个颇为棘手的问题，为了解决js的跨域，web开发人员是煞费苦心，研究了各种跨域方案，如果有机会的话，明河以后会一一展示给各位，今天明河重点介绍下html5新引入的postMessage跨域方案。

1.哪些场景要考虑跨域问题？

明河这二周在处理淘宝添加收藏夹的重构，里面就有一个非常经典的跨域问题。

添加收藏弹出层外层是淘宝商城页面域名是tmall.com，而弹出层内部的页面域名却是taobao.com，接下来的问题就是我现在希望弹出层内部的高度改变了，父页面弹出层的高度也随之改变，同时子iframe内有办法使用一个按钮，关闭父页面的弹出层。
这个场景还是非常经典的，很多朋友估计多多少少都会遇到这个情况，就是有个弹出层里面嵌一个iframe，iframe内的子页面如何操作父页面的弹出层或其他元素？

2.淘宝商城是如何处理跨域的？

由于今天主要是讲html5的跨域方案，这里明河简要提一下，有机会跟大家详细分享。
淘宝商城有个专门用于处理跨域的js类TMall.XDomain，这个类会生成子iframe中生成一个新的iframe，这个iframe我们叫它代理iframe，代理iframe必须跟父页面时同域的，这样代理iframe就有权限处理父页面。
这里明河推荐阅读以下文章：

3.哪些情况下存在跨域问题？

4.HTML5的window.postMessage简述

postMessage是html为了解决跨域通信，特别引入的一个新的API，目前支持这个API的浏览器有：Firefox, IE8+, Opera, Safari, Chrome。postMessage允许页面中的多个iframe/window的通信，postMessage也可以实现ajax直接跨域，不通过服务器端代理。

感谢苏河哥哥提供另外个主机作为跨域测试，O(∩_∩)O哈！
在上面的demo中，明河简单演示了postMessage的用法，父页面中有二个不同域的iframe，现在我们要求这二个iframe每过一秒，向对方的内容层传递一行文字，对象一接收到文字就开始输出。

5.postMessage用法解析

这里以iframe1.html的代码为例。

1)向另外一个iframe发送消息

var message = 'hello，RIA之家！   ' + (new Date().getTime());
window.parent.frames[1].postMessage(message, '*');

iframe1.html需要向iframe2.html发送消息，也就是第二个iframe，所以是window.parent.frames[1]，如果是向父页面发送消息就是window.parent。
postMessage这个函数接收二个参数，缺一不可，第一个参数即你要发送的数据，第二个参数是非常重要，主要是出于安全的考虑，一般填写允许通信的域名，这里明河为了简化，所以使用’*'，即不对访问的域进行判断。

2)另外一个iframe监听消息事件

iframe2.html中写个监听message事件，当有消息传到iframe2.html时就会触发这个事件。

var onmessage = function(e) {
var data = e.data,p = document.createElement_x('p');
p.innerHTML = data;
document.getElementById('display').appendChild(p);
};
//监听postMessage消息事件
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}

整个通信过程就结束了！是不是非常简单惬意！
如果你有加域名限,比如下面的代码：

window.parent.frames[1].postMessage(message, 'http://www.36ria.com');

就要在onmessage中追加个判断：

if(event.origin !== http://www.36ria.com') return;

6.明河结语

html5的postMessage相当强悍和易用！你可以利用这个特性解决大部分场景下的跨域问题，不用再创建个代理iframe之类的繁琐方法。严重推荐大家练习下该方法，目前的确存在浏览器差异问题，但相信以后会成为主流跨域通信方案。

载自：http://www.36ria.com/3890

2011年11月25日星期五

ubuntu-memo1

端末からの操作でしたら　
sudo
を付け加えてください。　root(スーパーユーザー)になるコマンドです。
$ sudo mv ./xampp1.7.1.tar.gz ~/

ウィンドウ操作でしたらでしたらウィンドウ自体をroot権限で開いてから操作。
端末から
$ sudo nautilus

2011年5月23日星期一

转----apple macbook pro真实的生产国和生产日期——苹果电脑序列号隐藏的秘密

是不是不信任卖家所言，或者将信将疑，想知道你购入的帅气的本本，真实的生产国、生产日期吗？我们从简简单单的序列号中就可以知道哦~

首先，要想知道你的序列号，有以下几种方法：1.可以在外包装上找到；2. 可以在本子底部找到，字很小，但是能看到的；3. 正规本子的发票上都会写着你的机型序列号。（官网上点击标题栏的“技术支持”也可以找到关于如何寻找自己机器序列号的内容）

如果你找到了自己的序列号，那我们一起看一下它是什么时候生产的，在哪里生产的，这样你大概就可以知道，自己购入到底是不是水货。

举个例子，假如，你的 macbook pro 序列号为：SG0331FSK59

关于生产国：

序列号的前两个字母即代表生产国。此处，SG代表生产国，新加坡。

常见的如：

F: Fremont, California, USA

CK: Cork, Ireland

SG or E: Singapore

UV: Taiwan

QT: Taiwan (Quanta Factory)

W8: Shanghai China

PT: Korea

关于生产日期：

头两个字母后的第一个数字（也就是第三个字符），代表生产年的最后一位数，例子中为0，所以可以是1990、2000、2010或者2020等。具体就要看你买入的日期，自己来推算了。正常来看，如果你2003年买的，就该是2000生产的；2012年买入的就应该是2010年生产的。电脑更新快，像APPLE这样的品牌，就常理来说，不会在2003年卖1990年的电脑，在2012年还卖2000年的吧。根据具体情况，此处的例子0，代表的就是2000年生产的。

第二、三个数字，就是例子中的33，这两个数是代表生产周，例子中，也就指2000年的第33周生产，实际上这就具体到了生产的月份和大概的日期。买本本时，这个生产周还是很有用的，也就是说，序列号中，这两个数字越大，就代表（相对而言）你购入的是该年内最新出产的。比如，同时有05和50的两个机器，50相对而言就是年底生产的，而05就是年初生产的。

关于查询、验证序列号，辨别行货、水货：

很多人在购入前或者已经购入了apple mac 系列后，尤其是网购，或者在经销商处购买的，都会担心，是不是行货、是不是翻新机。。。。

在苹果官网上也可以查询你的MACBOOK序列号（但如果你电脑现在运行的是WINDOWS系统，那么官网上只能查到型号，查不到具体配置，要下载安装safari浏览器，总之，苹果官网主要是面向苹果用户的；如果想查具体配置，需要在苹果系统下，在官网上输入APPLE ID及密码——这个可以通过你的本本创建）。反正，不管是哪个系统，都是很麻烦的！

注意喽，注意喽，现在就给你查询网址了。

下面的网址可以轻松的查到任何一款APPLE MAC 产品的序列号所包含的信息，但很遗憾，国内的网站没有这样全面的服务，页面全部是是英文的，在网页左上边，看到绿色条块了没，如果你想验证你mac的序列号和你购入的机器是否一致，就可以在那个位置输入你的机器的序列号，点search后，转入的页面会详细的介绍每一个信息，内存、CPU、显示器尺寸、显卡、硬盘等，OK所有一切。完全是你百度 N 遍都查不到的信息，解决了你的顾虑。WINDOWS系统下，连官网都查不到哦~

http://www.appleserialnumberinfo.com/Desktop/index.php

俗话说，授人以鱼不如授人以渔，至于那些急切想查询看着都让你心花怒放的 iphone、ipad、ipod 等等其他苹果产品的同志们，不要再baidu baidu 了，没用地，毕竟国内普及苹果远不及国外啊~~google，虽然很好，但很遗憾，在和谐的国内。。动不动就无法显示，这个，你了的哈，所以先用谷歌，一旦不显示，你再用下面推荐的必应~~~强力推荐bing，灰常不错！尤其是界面，美得不得了的画面图片，我稀饭，但缺点就是中文网页上跟百度一样，搜出来的东西，太多广告，尤其是要搜点商品（谷歌国内用户少，自然广告就少），出来的东西，不可信的很多，如果非销售品的话，这个搜索引擎比百度要好多了~

2011年5月19日星期四

URLRequest详解

Fannic原创 (转载请注明出处 http://ylucy.cnblogs.com)
URLRequest的使用实例

// 设置url 
NSURL * url = [NSURL URLWithString:@"http://www.stackoverflow.com"];

//设置Request
//所构建的NSURLRequest具有一个依赖于缓存响应的特定策略，cachePolicy取得策略，timeoutInterval取得超时值
NSURLRequest * request = [NSURLRequest requestWithURL:url
　　　　　　　　　　　　　　　 cachePolicy:NSURLRequestReturnCacheDataElseLoad timeoutInterval:60];
// 用这个request和delegate来创建连接  
_connection = [[NSURLConnection alloc] initWithRequest:request delegate:self];
 
其中：
NSURLRequest默认的cache policy是NSURLRequestUseProtocolCachePolicy， 是最能保持一致性的协议。
NSURLRequestReloadIgnoringCacheData 忽略缓存直接从原始地址下载
NSURLRequestReturnCacheDataElseLoad 只有在cache中不存在data时才从原始地址下载
NSURLRequestReturnCacheDataDontLoad 允许app确定是否要返回cache数据，如果使用这种协议当本地不存在response的时候，创建NSURLConnection or NSURLDownload实例时将会马上返回nil；这类似于离线模式，没有建立网络连接；

你只需要实现以下delegate方法来处理数据响应- (void)connection:(NSURLConnection*)connection didReceiveResponse:(NSHTTPURLResponse*)response
- (void)connection:(NSURLConnection*)connection didReceiveData:(NSData*)data
- (void)connection:(NSURLConnection*)connection didFailWithError:(NSError*)error
- (void)connectionDidFinishLoading:(NSURLConnection *)connection
NSURLConnect还提供了一个方便的类方法(class method) : sendSynchronousRequest:returningResponse:error:可用来 同步地加载一个URL请求
+ (NSData *)sendSynchronousRequest:    (NSURLRequest *)request      returningResponse:   (NSURLResponse **)response    error:  (NSError **)error
request 要装载的URL请求. 这个request 对象 作为初始化进程的一部分,被深度复制(deep-copied). 在这个方法返回之后, 再修改request, 将不会影响用在装载的过程中的request
reponse 输出参数, 由服务器返回的URL响应
error   输出参数, 如果在处理请求的过程中发生错误,就会使用.  无错误,就为NULL
小常识：
URL loading system class 层次结构如下图所示：

订阅：博文 (Atom)

トマト&タマゴの道

网页浏览总次数

2011年12月20日星期二

Xdomain

クライアント

(转)HTML5之window.postMessage实现跨域传递消息

(转)利用HTML5的window.postMessage实现跨域通信

1.哪些场景要考虑跨域问题？

2.淘宝商城是如何处理跨域的？

3.哪些情况下存在跨域问题？

4.HTML5的window.postMessage简述

5.postMessage用法解析

1)向另外一个iframe发送消息

2)另外一个iframe监听消息事件

6.明河结语

2011年11月25日星期五

ubuntu-memo1

2011年5月23日星期一

转----apple macbook pro真实的生产国和生产日期——苹果电脑序列号隐藏的秘密

2011年5月19日星期四

URLRequest详解

热门帖子