title: manipulate iframe from a different domain
body: <p>For context, I am designing an Ionic mobile app for my website. However, I don't believe that this question is limited to the Ionic framework.</p>
  
  <p>Within my app, I want to display a full-width, full-height iframe loading one of the pages from my website. This is straightforward enough:</p>
  
  <pre><code>&lt;iframe id="myFrame" src="https://example.com/" style="height:100%;width:100%"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>However, I now want to be able to "trim" or "hide" content from the iframe (something similar to <a href="https://www.w3schools.com/howto/howto_js_element_iframe.asp" rel="nofollow noreferrer">this</a> example). In one iframe, I want to trim out just the navbar (a particular named div). In another iframe, I actually want to trim out everything that is NOT within a particular named div within the page.</p>
  
  <p>I have seen this done using the jQuery "load" function for sites within the same domain. However, with the app I am pretty sure I need to treat the iframe source as a separate domain, even though I own the site and the app is designed to access the site.</p>
  
  <p>I saw what looked like a promising answer <a href="https://stackoverflow.com/a/2828145/7074517">here</a> using jQuery Ajax, but I need some more pointers to execute it.</p>
  
  <p>Any tips on how to do this would be appreciated!</p>