title: Change function from click event to window load
body: <p>I am trying to change <code>postMessage</code> from sending a message to an iframe on click to sending it on page load. </p>
  
  <p>On the parent page:</p>
  
  <pre><code>var el = document.getElementById('button');
  
  var getFontFamily = function(){
  
      for(var i = 0; i &lt; document.styleSheets.length; i++){
          for(var j = 0; j &lt; document.styleSheets[i].rules.length; j++){
  
              if(document.styleSheets[i].rules[j].style.fontFamily){
                  return document.styleSheets[i].rules[j].style.fontFamily;
              }
          }
      }
  
      return 'not-found';
  };
  
  window.addEventListener('click', function(){
      var data = getFontFamily();
  
      window.frames[0].postMessage(data, 'http://localhost:3000');
  
      console.log('Message sent --&gt;');
  });
  </code></pre>
  
  <p>The iframe page has the following to receive the <code>postMessage</code> event.</p>
  
  <pre><code>window.addEventListener('message', function(e){
          document.body.style.fontFamily = e.data;
  
          console.log('&lt;---Message received');
      }, false);
  </code></pre>
  
  <p>How can I change this to load the css from the parent to the child on page load and not on click?</p>
  
  <p>Current working example: <a href="http://jsfiddle.net/mattography/nzjfn6u4/1/" rel="nofollow">jsfiddle</a></p>