Question

我在wix页面上提供了HTML元素（饼图）。我从本地存储中提取了7个变量的数据，然后通过Postmessage将信息传递给HTML元素。

我的代码作为按钮（导出功能）的一部分时可以正常工作。但是我想从onReady函数触发事件（即页面加载时）。我使用完全相同的代码，但是它根本无法与OnReady函数配合使用（即，我无法以编程方式触发事件）。

用按钮混合导出功能的页面代码（可以正常工作）：

export function button1_click(event) {
var data = [introdeo, intcalypso, intbalthazar, intluna, intkiara, intmistral, intsaya];
console.log(data);
var labels = ["Rodeo", "Calypso", "Balthazar", "Luna", "Kiara", "Mistral", "Saya"];
let info = {data:data, labels:labels};
$w("#html1").postMessage(info);
}

onReady函数的混合页面代码（无效）：

$w.onReady(function () {
var data = [introdeo, intcalypso, intbalthazar, intluna, intkiara, intmistral, intsaya];
var labels = ["Rodeo", "Calypso", "Balthazar", "Luna", "Kiara", "Mistral", "Saya"];
let info = {data:data, labels:labels};
$w("#html1").postMessage(info); 

} );

HTML代码（wix页面上HTML元素中的图表代码）：

<!DOCTYPE html>
<html lang="en-US">
<body>


<canvas id="myChart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<script type="text/javascript">


var ctx = document.getElementById('myChart').getContext('2d');
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: {
        labels:[],
        datasets: [{
            data: [],
            backgroundColor: ["#f97a03", "#52aff0", "#35a11d", "#f052e4", "#853fc2", "#f0f712", "#092978"],
        }]
    },
    options: {}
});

window.onmessage = function(event){
    myPieChart.data.datasets[0].data = event.data.data;
    myPieChart.data.labels = event.data.labels;
    myPieChart.update();
};

</script>

</body>
</html>

使用按钮“导出”功能，我可以在网页上获取更新的饼图。使用OnReady代码，我在HTML元素中获得了一个空白。

Answer 1

似乎html元素可能尚未准备好接收该POST。尝试将$w("#html1").postMessage(info);包装在setTimeout中。

$w.onReady(function () {
  var data = [introdeo, intcalypso, intbalthazar, intluna, intkiara, intmistral, intsaya];
  var labels = ["Rodeo", "Calypso", "Balthazar", "Luna", "Kiara", "Mistral", "Saya"];
  let info = {data:data, labels:labels};
  setTimeout(function() {
    $w("#html1").postMessage(info);
  }, 1000) 
});

Answer 2

我建议您使用诺言并在准备使用HTMl组件时兑现承诺

因此，在这段代码中，我们每500ms发送一次数据，以检查HTML是否准备就绪并准备好更新全局变量并解决Promise

$w.onReady(()=>{
let isHTMLready = false;

    async function sendHTMLData() {
        await isHTMLReady(); // this line will wait until the HTML component is ready
        // then your code here
    }

    $w('#htmlID').onmessage(e=>{
        let {data} = e;
        if(data.isReady) {
            // html is ready 
            isHTMLReady = true; //updating the gloable variable
        } else if(data.someOtherCondition) {
            // do something
        }
    });

    function isHTMLReady() {
        return new Promise((res,rej)=>{
            let i = 0;
            let intervalID = setInterval(()=>{
                $w('#html').postMessage({
                    isHTMLReady : true
                });
                if(isHTMLready) { // checking if the global variable is changed to true
                    // stop the time interval
                    clearInterval(intervalID);
                    // resolve the promise
                    res("ready");
                }
                i++;
                if(i > 28) { // waiting until 14 second before rejecting the promise
                    // rejecting the promise
                    rej("no response from HTML");
                }
            },500);
        });
    }
    
});

在HTML组件上

添加以下代码它将检查发送的数据是否为“ isHTMLReady”，然后（如果HTML组件已准备就绪），我们会将其发送回wix网站从那里我们将更新变量并停止时间间隔并解决诺言

window.onmessage = e => {
    let {data} = e;
    if(data.isHTMLReady) {
        messageWixSite({isHTMLReady: true});
    }
    else if(data.isGraphData) {
        // write your code here
    }
}

function messageWixSite(data) {
    let msg = {
        "isCropper" : true,
    }
    msg = {...msg, ...data};
    // console.log("message : " , msg);
    window.parent.postMessage(msg, "*");
}

这样，我们确保在发送数据之前，wix网站和HTML元素均已准备好使用

通过WIX代码馈送HTML图表时的事件处理程序问题

2 个答案: