title: Changing parent h1 text to reflect title of child iframe
body: <p>How can I get the page title of a webpage from my <code>iframe</code> and have it displayed within the <code>h1</code> element of the header of the parent page? Thanks in advance!</p>
  
  <p>My bare HTML is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
      &lt;title&gt;This title remains unchanged&lt;/title&gt; 
      &lt;meta name="viewport" content="initial-scale=1.0"&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
      &lt;link rel="stylesheet" href="jquery.mobile-1.3.1.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt; 
      &lt;div data-role="page"&gt;
          &lt;div data-role="header" data-position="fixed"&gt;
              &lt;h1&gt;This should be the title of any page loaded in the iFrame below&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt; 
              &lt;iframe src="http://fair-go.com/crap/cpgs/act_paramedic/index_cmg.htm" width="100%" height="640"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>