Question

我有一个带有iFrame的HTML页面，我想将短字符串值从父级发送到iFrame。短字符串值是一个类似于“ voice2.mp3”的文件名，并且iFrame使用 WaveSurfer 播放音频文件。

到目前为止，我使用iFrame端的间隔检查字符串值是否已更改，是的，它可以正常工作。

但是我想知道如何使用postMessage做到这一点，我不知道如何在我的代码中实现它？

这是iFrame代码：

window.nameOld = "voice1.mp3";

setInterval(function(){ 
var name = parent.window.postMe;

if(name !== window.nameOld){
       console.log("name Changed");

       window.nameOld = name;
       wavesurfer.load(name);
       runFunc();
};


}, 1000);

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: '#edeaef',
    progressColor: '#d3cbd8',
    cursorColor: '#9800ff',
    cursorWidth: 1,
    interact: false,
    responsive: true,
    hideScrollbar: true,
});


    function runFunc(){
    wavesurfer.on('ready', function () {
    wavesurfer.play();
});
    wavesurfer.on('finish', function () {
    console.log("Just finished!");
    wavesurfer.pause();
});

    }

这是将在单击按钮时执行的父代码：

window.postMe= "voice2.mp3";

Answer 1

我可能没有完全理解这一点，但是如果我错了，请纠正我，您想知道如何将父项消息发送给子级IFrame吗？如果是这样，则需要包含JQuery并从父级使用JQuery.postMessage，从子IFrame使用JQuery.recieveMessage。那应该删除间隔运行的代码。

使用postMessage将短字符串值发送到iFrame

1 个答案: