title: Why my postMessage does not working properly?
body: <p>I have a index page contains the iframe element, this iframe refer to another DOMAIN page.
  and i need to get the data from iframe page, so i applied the postmessage concept.
  but it does not working.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  &lt;title&gt;Using PostMessage for Cross-Domain Access to an Iframe&lt;/title&gt;
  &lt;meta name="description" content="Example demonstrates using postMessage to interact with an iframe on another domain and obtain information about its objects and properties." /&gt;
  &lt;script type="text/javascript"&gt;
  // check for browser support
  if ( window.addEventListener ) {
  
      // when DOM is ready assign button onclick handlers
      window.addEventListener('DOMContentLoaded', function() {
          // where to send messages with postMessage
          var target_origin = 'Myiframe.html';
  
          // get reference to form to attach button onclick handlers
          var form = document.getElementById('demoForm');
          // get reference to iframe window
          var win = document.getElementById('ifrm').contentWindow;
  
          // set height of iframe and display value
          form.elements.button1.onclick = function() {
              var ifrm = document.getElementById('ifrm');
              var ht = ifrm.style.height = '160px';
              this.form.display.value = 'The iframe\'s height is: ' + ht;
          }
  
          // to increment and display counter variable in iframed document
          form.elements['button2'].onclick = function() {
              win.postMessage( {'task': 'ctr'}, target_origin );
          }
  
          // to get value of form element in iframed document
          form.elements.button3.onclick = function() {
              win.postMessage( {'task': 'val'}, target_origin );
          }
  
          // to invoke function in iframed document
          form.elements.button4.onclick = function() {
              win.postMessage( {'task': 'clear'}, target_origin );
          }
  
      }, false);
  
      // message handler
      window.addEventListener('message', function (e) {
          // check message origin
          if ( e.origin === 'Myiframe.html' ) {
              var task = e.data['task']; // task received in postMessage
              // get reference to demo form
              var form = document.getElementById('demoForm');
  
              switch ( task ) { // postMessage tasks
                  // display counter received in postMessage
                  case 'ctr' :
                      form.display.value = 'counter in iframe is: ' + e.data['counter'];
                      break;
  
                  // display text box value received in postMessage
                  case 'val' :
                      form.display.value = 'The greeting is: ' + e.data['val'];
                      break;
  
                  case 'clear' :
                      // nothing to do for this one
                      break;
                  //default:
  
              }
          }
      }, false);
  
  
  } 
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="demoForm" action="#"&gt;
      &lt;p&gt;
          &lt;input name="button1" type="button" value="Button 1" /&gt;
          &lt;input name="button2" type="button" value="Button 2" /&gt; 
          &lt;input name="button3" type="button" value="Button 3" /&gt; 
          &lt;input name="button4" type="button" value="Button 4" /&gt; 
      &lt;/p&gt;
      &lt;p&gt;&lt;input type="text" name="display" size="30" readonly="readonly" /&gt;&lt;/p&gt;
  &lt;/form&gt;
  &lt;iframe name="ifrm" id="ifrm" src="Myiframe.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Myiframe.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;untitled&lt;/title&gt;
  &lt;meta name="robots" content="noindex" /&gt;
  &lt;script type="text/javascript"&gt;
  // example variable and function for cross-document demo
  counter = 0; 
  function clearGreeting() {
      document.forms['iframeDemoForm'].elements['greeting'].value = '';
  }
  
  // check for browser support
  if ( window.addEventListener ) {
      // message handler
      window.addEventListener('message', function(e) {
          // check message origin
  
          if ( e.origin === 'index.html' ) {
              var task = e.data['task']; // task received in postMessage
              var msg; // for postMessage reply to e.source 
  
              switch ( task ) { // postMessage tasks
                  // increment counter variable and send
                  case 'ctr' :
                      msg = { 'task': 'ctr', 'counter': ++counter };
                      e.source.postMessage(msg , e.origin );
                      break;
  
                  // send value of entry in text box (validate first)
                  case 'val' :
                      var re = /[^-a-zA-Z!,'?\s]/g; // to filter out unwanted characters
                      var fld = document.forms['iframeDemoForm'].elements['greeting'];
                      var val = fld.value.replace(re, '');
                      var msg = {'task': 'val', 'val': val};
                      e.source.postMessage(msg , e.origin );
                      break;
  
                  // clear text box by calling function
                  case 'clear' :
                      clearGreeting();
                      break;
  
                  //default:
              }
          }
      }, false);
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Iframe&lt;/h1&gt;
  
  &lt;ul&gt;
      &lt;li&gt;Button 1 sets iframe style height&lt;/li&gt;
      &lt;li&gt;Button 2 increments global variable in iframed document&lt;/li&gt;
      &lt;li&gt;Button 3 transfers Greeting below to text box above iframe&lt;/li&gt;
      &lt;li&gt;Button 4 clears Greeting text box below (calls function in iframe)&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;form action="#" id="iframeDemoForm"&gt;
      &lt;label for="greeting"&gt;Enter a Greeting: &lt;/label&gt;
      &lt;input type="text" name="greeting" id="greeting" value="Hello there!" /&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  (function() {
  
      // disable submission of all forms on this page
      for (var i=0, len=document.forms.length; i&lt;len; i++) {
          document.forms[i].onsubmit = function() { return false; };
      }
  
  }());
  &lt;/script&gt;
  
  
  &lt;p id="demoInfo"&gt;&lt;span class="news"&gt;Note&lt;/span&gt;: This page is part of a tutorial on postMessage and is intended to display in an iframe. &lt;a href="http://www.dyn-web.com/tutorials/iframes/postmessage/access/iframe.php"&gt;Click here&lt;/a&gt; to see it in its proper context.&lt;/p&gt;
  
  &lt;script type="text/javascript"&gt;
  // if not in iframe, display link to tutorial
  if ( self === top ) {
      document.getElementById('demoInfo').style.display = 'block';
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I appled some operation when buttoon is fired, ut nothing will work except the first button.
  what i make mistake and guide me plz</p>