title: How to capture events in an window that is loaded within a page
body: <p>Let's say I have a website called <code>https:// www.mysite.com</code>. I am trying to figure out how I can capture events (like button click) on some other site (say - <code>https://www.othersite.com</code> that is willingly loaded) inside of <code>mysite</code> (something like a <code>iframe</code>).</p>
  <p>Note: I do not have access to <code>https://www.othersite.com</code></p>
  <p>Something like :</p>
  <pre><code>&lt;my-site&gt;
  
  // load external site https://www.othersite.com here
  
  &lt;/my-site&gt;
  </code></pre>
  <p>I tried using iframes but I realised it's not possible due to <a href="http://en.wikipedia.org/wiki/Same_origin_policy" rel="nofollow noreferrer">Same Origin Policy</a>. (Please do not suggest the <code>php</code> solution with <code>file_get_contents</code>. I have gone through all the articles <a href="https://stackoverflow.com/questions/6170925/get-dom-content-of-cross-domain-iframe">here</a> on stackoverflow in the last couple of days but could not find a JS solution to this).</p>
  <p>Basically, I was looking at something similar to <a href="https://www.selenium.dev/selenium-ide/" rel="nofollow noreferrer">Selenium IDE</a> (It's extension <a href="https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd?hl=en" rel="nofollow noreferrer">here</a>) where I want to capture events carried out by the user on <code>https://www.othersite.com</code> but its loaded on/inside <code>mysite</code>.</p>
  <p>Any pointers to what can be some of the right approaches/strategies for solving this?
  This is very fundamental question in what I am trying to achieve and I want to do it the right way. Any guidance is greatly appreciated!</p>