CODEWITHSUNDEEP
javascriptdomiframefirefox-addon
prateekkathal
prateekkathal

Reputation: 3572

Posting Message to iframe using window.postMessage

I am stuck at stupid problem. I am trying to develop a Firefox Extension in which I have a popup panel and in that panel, there is an iframe of a tasks.html File.

I want to postMessage to that iframe on click of a button in my web page(Say webpage interaction with the plugin) but its not working.

Here is the image to the Panel on how it looks.

Panel

This is the function, M using to send data to the iframe. The Post Function is called when the button in the webpage is clicked.

function Post() {
    var iframe = window.document.getElementById("iframe").contentWindow;
    postMessageToWindow(iframe, "Hello");
}

function postMessageToWindow(win, message) {
    try {
        win.postMessage(message, '*');
        return true;
    } catch(e) {
         return false;
    }
}

and In that html page, I have 

window.addEventListener('message', function(e) {
    var str_data = e.data;
    document.getElementById('test').innerHTML = str_data;
});

but nothing gets shown in the test DIV.

Please help me with it. Thanks.

Upvotes: 0

Views: 2519

Answers (3)

Noitidart
Noitidart

Reputation: 37228

Ignore my message about win.postMessage I didn't know that postMessage was a "native" function. It's cool helping you I learned something.

Anyways yes it would be nice if your code worked on first time. Thanks to some info from Blargh I found your problem.

Find sample_button.appendChild(tasks_popup); and remove that, why were you doing that? Right now its cloning the original object and adding it.

Another thing, why go through postMessage? Instead of postMessage you can simply do tasks_iframe.contentDocument.querySelector('#test').innerHTML = 'why bother with postMessage, just do this? but i fixed postMessage for you too<br>';

Another thing, the interval of 300ms works but its intensive and not the best solution. It will work for now though.

Do you have plans to upload this to addons.mozilla.org? They don't like setting innerHTML, if you plan to release there let me know and I'll show you how to do it without innerHTML.

Also your "Refresh" button in the panel in overlay.xul needs fixing to document.getElementById('tasks-list').contentDocument.location.reload()

Upvotes: 1

Blargh
Blargh

Reputation: 169

in the code you posted, im not seeing the toolbar button get added, its not even in the customize view, did you test your sample code you uploaded?

the addAsTask function is failing hard in your sample code because elements like #sample-button and #TasksPanel don't exist. please make sure your test case works before uploading

Upvotes: 1

Noitidart
Noitidart

Reputation: 37228

box.com/s/hxn16axnxbwc151h92g

the addon doesnt work on install but i see a problem here:

function postMessageToWindow(win, message) { try { window.top.postMessage(message, '*'); return true; } catch(e) { return false; } }

on line3 it says window.top. use win.top. also i dont think u need to use .top. just use win.postMessage

also is postMessage a function in the iframe? because when i look theres no postMessage function in tasks.html

Upvotes: 0

Related Questions