将单击事件的功能更改为 window 加载

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(){

已更新 fiddle：http://jsfiddle.net/nzjfn6u4/2/

将单击事件的功能更改为 window 加载

Change function from click event to window load

javascript

postmessage