Using postMessage to send short string value to the iFrame

Question

I have an HTML page with an iFrame inside and I want to send short string value from parent to the iFrame. The short string value is a file name like "voice2.mp3" and the iFrame uses WaveSurfer to play the audio file.

So far I check if the string value has changed using intervals on the iFrame side and, yes it works fine.

But I'm wondering how can I do this using postMessage and I have no idea how to implement it in my code?

Here is the iFrame code:

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();
});

    }

And here is the parent code which will be executed on button click:

window.postMe= "voice2.mp3";

I would suggest starting with [some good documentation on postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). Note that that documentation includes [information on how to receive the posted message in the iframe](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#The_dispatched_event) as well. — Heretic Monkey, Jun 04 '19 at 21:56
Possible duplicate of [How to communicate between iframe and the parent site?](https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site) — Heretic Monkey, Jun 04 '19 at 21:59

score 1 · Answer 1 · answered Jun 04 '19 at 21:48

1

I might not be fully understanding this but correct me if I'm wrong, you are wanting to know how to send a message as a parent to a child IFrame? If so, you would want to include JQuery and use JQuery.postMessage from the parent side and JQuery.recieveMessage from the child IFrame. That should remove the code running on interval.

answered Jun 04 '19 at 21:48

russell

37
6

1

I think jQuery has nothing to do with the question. He is referring to Window.postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage – XCS Jun 04 '19 at 21:51
Yes you are right, I completely forgot about that. JQuery has postMessage and recieveMessage methods that I used to create my previous project. – russell Jun 04 '19 at 21:53
wait a minute... I can get rid of intervals using jQuery... that's smart thank you... plus one – Sara Ree Jun 04 '19 at 21:55
But I need more help on this...Where should I start from? – Sara Ree Jun 04 '19 at 21:56
I suggest you maybe start from looking at examples (like this one http://benalman.com/projects/jquery-postmessage-plugin/). – russell Jun 04 '19 at 21:58

Using postMessage to send short string value to the iFrame

1 Answers1