Fire change event on select after cross script postmessage

Question

I have browser extension that opens an iFrame and allows the user do stuff, which then updates values on the parent page. The is across different domains and used postMessage and receiveMessage so that I can pass the messages across domains. This works well and I can use these messaged to set certain values in controls on the parent page. I can set the value of select box, but I also need to fire the select box'es change event via jQuery

$("#selectid").change();

This works if called from user event on the page, but when called from the receiveMessage, it just does not fire the change event. I believe this may be deliberate to prevent cross-scripting attacks, but as I can set the value, surely I should be able to call the change event also. Can anyone confirm this behaviour and/or know of a work around.

PS. The code I'm using is part of a large app, and I don't have a demo that I can easily show, but the explanation above is quite detailed.

Answer 1

You need to dispatch onchange event if handler is bound using addEventListener() javascript's method:

    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    $(selector)[0].dispatchEvent(evt);

There are some polyfills available to support IE8, e.g: https://gist.github.com/jonathantneal/3748027