fill iframe input field from click on parent

Question

I have an iframe containing a form. On the parent page, I have an interactive div which populates data on mouse clicks (map.) Is there a way where I can fill an input field that is part of the iframe by clicking on something from the parent page?

Answer 1

You can communicate between your page and iFrame content using messages.

// frame.html:
window.onmessage = function(event) {
    // handle message and fill input field
    var text = event.data;
};

// page:
// <iframe id="myframe" src="framed.htm"></iframe>

document.getElementById('myframe').contentWindow.postMessage('textToFill','*');