How to trigger an event from iframe content to outer website?

Question

I am working on chat-bot which is intended to work with all domains. suppose i have a chat-bot side under 'chat.mybot.com'(iframe)(done on angular) and my website is 'example.com', here i cant listen to events of 'chat.mybot.com'(iframe) from 'example.com' because its on different domains.

Solution if it was on same domain

$('iframe#chat_bot').load(function(){
  $(this).contents().find("body").on('click','#showthat',function(event){ 
    alert("div with id 'showthat' clicked inside iframe"); 
  });
});

Problem

How to i do it in case of cross domain situation?

I have researched a bit and took a look at other chat apps but still cant get a clear idea how to do it.

Any suggestions or thoughts are appreciated.

Answer 1

This might help you.

parent.$('body').trigger('eventName');

The event triggered inside the iframe will be detected in the parent document.

OR

$('#InnerIframe').contents().find('#SuperWebF1').trigger( "click" );

InnerIframe - ID of IFrame
SuperWebF1 - ID of the button