Измените функцию от события клика до загрузки окна

Question

Я пытаюсь изменить postMessage от отправки сообщения в iframe при нажатии на отправку его на загрузку страницы.

На родительской странице:

var el = document.getElementById('button'); 

var getFontFamily = function(){ 

    for(var i = 0; i < document.styleSheets.length; i++){ 
     for(var j = 0; j < 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 -->'); 
}); 

страница IFrame имеет следующий получить postMessage событие.

window.addEventListener('message', function(e){ 
     document.body.style.fontFamily = e.data; 

     console.log('<---Message received'); 
    }, false); 

Как это изменить, чтобы загрузить css из родительского элемента в дочерний элемент на загрузке страницы, а не по щелчку?

Текущий рабочий пример: jsfiddle

Answer 1

Изменить код из этого:

window.addEventListener('click', function(){ 

к этому:

window.addEventListener('load', function(){ 

Изменено скрипку: http://jsfiddle.net/nzjfn6u4/2/