网页浏览总次数

2011年12月20日星期二

iframe1.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
  <title>Untitled</title> 
</head> 
<style> 
body { 
  font-size: 12px; 
  color: gray; 
} 
</style> 
<script type="text/javascript"> 
  window.onload = function() { 
     
    document.getElementById('title').innerHTML = 'Domain: ' + document.location.host; 
    window.document.onmousemove = function(e) { 
      var x = (window.Event) ? e.pageX : window.event.clientX; 
      var y = (window.Event) ? e.pageY : window.event.clientY; 
      window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*');       
    }; 
    var onmessage = function(e) { 
      var data = e.data; 
      var origin = e.origin; 
      document.getElementById('display').innerHTML = data; 
    }; 
    if (typeof window.addEventListener != 'undefined') { 
      window.addEventListener('message', onmessage, false); 
    } else if (typeof window.attachEvent != 'undefined') { 
      window.attachEvent('onmessage', onmessage); 
    } 
  }; 
</script> 
<body> 
<div id="title"></div> 
<br> 
<div id="display"></div> 
</body> 
</html> 
发帖者 时间： 没有评论:

HTML5：使用postMessage实现Ajax跨域请求


由于同源策略的限制，Javascript存在跨域通信的问题，典型的跨域问题有iframe与父级的通信等。
常规的几种解决方法：
(1) document.domain+iframe； (2) 动态创建script； (3) iframe+location.hash； (4) flash。
这里不细说这几种方法，记录的是HTML5的window.postMessage。postMessage兼容IE8+、Firefox、Opera、Safari、Chrome。
需要两个异域的服务器来做测试，当然也可以用本地和线上服务器作为两个异域的服务器。假如使用phonegap开发，就可以将请求文件安装在客户端，然后动态请求服务器的数据处理，获得并显示数据。这样就可以用任意Web开发语言及方法来开发phonegap App所需的后台。

1.  postMessage的用法

postMessage是HTML5为解决js跨域问题而引入的新的API，允许多个iframe/window跨域通信。
假设有结构如下：
test.html<section id="wrapper">
  <header>
    <h1>postMessage (跨域)</h1>
  </header>
  <article>
    <form>
      <p>
        <label for="message">给iframe发一个信息：</label>
        <input type="text" name="message" value="son" id="message" />
        <input type="submit" />
      </p>
    </form>
    <h4>目标iframe传来的信息：</h4>
    <p id="test">暂无信息</p>
    <iframe id="iframe"
    src="http://xiebiji.com/works/postmessage/iframe.html"></iframe>
  </article>
</section>
　　
iframe.html<strong>iframe指向xiebiji.com</strong>
<form>
  <p>
    <label for="message">给父窗口发个信息：</label>
    <input type="text" name="message" value="dad" id="message" />
    <input type="submit" />
  </p>
</form>
<p id="test">暂无信息。</p>
下面是test.html里的Javascript代码（发送数据）：

var win = document.getElementById("iframe").contentWindow;
document.querySelector('form').onsubmit=function(e){
  win.postMessage(document.getElementById("message").value,"*");
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;
}
　　关键代码就一句：
win.postMessage(document.getElementById("message").value,"*");
　　postMessage是通信对象的一个方法，所以向iframe通信，就是iframe对象调用postMessage方法。postMessage有两个参数，缺一不可。第一个参数是要传递的数据，第二个参数是允许通信的域，“*”代表不对访问的域进行判断，可理解为允许所有域的通信。
　　然后是iframe.html里侦听接收数据的代码：
var parentwin = window.parent;
window.onmessage=function(e){
  document.getElementById("test").innerHTML = e.origin + "say:" + e.data;
  parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"*");
};
　　很简单，相信一看就懂了。e.data包含传送过来的数据，e.origin指代源域。
然后iframe.html也给test.html发送回应的数据，test.html接收数据。代码雷同，就不贴代码了。
点此查看Demo（代码素Joe哥给的）

2. Ajax跨域请求

基于以上的跨域通信，只要将Ajax代码放在iframe.html里的onmessage处理函数里头，将test.html用postMessage传过来的数据作为参数发送请求，再将返回的数据用postMessage传给test.html。这样就实现了跨域的Ajax请求。其实是很简单的东西。
贴个示例代码吧，但跟以上的代码无关。
(function(){
  //获取跨域数据
  window.onmessage = function(e){
    var url = "http://yangzebo.com/demo/noforget/test.php?msg=" + e.data;
    //Ajax
    var xhr = getXHR();
    if(xhr){
      xhr.open("GET",url,true);
      xhr.onreadystatechange = changeHandle;
      xhr.send(null);
    }else{
     alert("不支持Ajax");
    }
    function changeHandle(){//返回处理
      if(xhr.readyState == 4){
        var parentwin = window.parent;
        parentwin.postMessage(xhr.responseText,"*");//跨域发送数据
      }
    }
    function getXHR(){//获取XMLHttpRequest
      var xhr_temp;
      if(window.XMLHttpRequest){
        xhr_temp = new XMLHttpRequest();
      }else if(window.ActiveXObject){
        xhr_temp = new ActiveXObject("Microsoft.XMLHTTP");
      }else{
        xhr_temp = null;
      }
      return xhr_temp;
    }
  };
})();
　　然后给个不好看的Demo。
有兴趣代码请求啥的自个用开发人员工具看吧，“zebo男”是从数据库读出来的，“my msg”是sendAndReceive.html发给test.php的Ajax请求的参数，通过test.php和iframeforAjax.html回传到sendAndReceive.html。

3. 提示

要获取iframe的contentWindow才能调用postMessage。
postMessage一定要在iframe加载完成之后调用才可以正常运行。（这个耗了我好长时间）
最后要感谢Joe哥的提示和给我偷用服务器来测试的hulin小妹妹。：D
[原帖]：http://yangzebo.com/blog/?p=208
发帖者 时间： 没有评论:

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</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 src="http://x.com/Html/webtwo.htm" id="twoiframe" width="800" height="200">
        </iframe>
    </div>
</body>
</html>
<script type="text/javascript">
    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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>第二个网站</title>
</head>
<body>
    <div id="testdiv" style="border: 1px solid lime; width: 400px; height: 400px;">
        UserName:<input type="text" id="txtUser" value="jackie" />
        <br />
        Password:<input type="text" id="txtPwd" value="123" />
    </div>
    <br />
        接受来自http://h.com域下传递过来的值
    <div id="acc" style="border: 1px solid blue; width: 100px; height: 100px;">
    </div>
</body>
</html>
<script type="text/javascript">
    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发送消息
  1. var message = 'hello，RIA之家！&nbsp;&nbsp; ' + (new Date().getTime());
  2.         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时就会触发这个事件。
  1. var onmessage = function(e) {
  2.        var data = e.data,p = document.createElement_x('p');
  3.        p.innerHTML = data;
  4.        document.getElementById('display').appendChild(p);
  5.     };
  6.     //监听postMessage消息事件
  7.     if (typeof window.addEventListener != 'undefined') {
  8.       window.addEventListener('message', onmessage, false);
  9.     } else if (typeof window.attachEvent != 'undefined') {
  10.       window.attachEvent('onmessage', onmessage);
  11.     }
整个通信过程就结束了！是不是非常简单惬意！
如果你有加域名限,比如下面的代码：
  1. window.parent.frames[1].postMessage(message, 'http://www.36ria.com');
就要在onmessage中追加个判断：
  1. 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
发帖者 时间： 没有评论:
订阅： 博文 (Atom)