title: Dynamically change header names when Iframe content changes from a button
body: <p>I have an html master page template. That page consists of a header, body, and footer. In the body, there is an Iframe. The footer has picture button icons that load different html form pages in the iframe. When I click on a different icon, the iframe content changes to that page. </p>
  
  <p>My question, is how to change the header title when I click the icon?</p>
  
  <p>The Master Page has a header called "Metrics Entry Form". When I click the icons at the footer, the header should dynamically change(e.g. Safety Entry Form, Waste Entry Form, etc). </p>
  
  <p>Can this be done with CSS? Or is Javascript or PHP needed. Thanks </p>
  
  <p>My code is pasted below. Any help is most appreciated.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;meta charset="UTF-8" content="HTML,CSS,XML,JavaScript"&gt;
        &lt;script src="Scripts/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="Scripts/Global.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="Scripts/modernizr.custom.86080.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" type="text/css" href="Styles/Design.css"&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div id="header"&gt;
           &lt;h1 id="h1"&gt;Metrics Entry Form&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div id="iFrameHeight"&gt;
           &lt;iframe name="iframe" src="MetricsEntryForm.html" scrolling="auto" id="GlobalFrame"&gt;&lt;/iframe&gt;
        &lt;/div&gt;
        &lt;div id="footer"&gt;&amp;nbsp;        
           &lt;input title="Previous Page" type="previousbutton" onclick="PreviousPage()"&gt;&lt;/input&gt;
           &lt;input title="Waste Entry Page" type="wastebutton" onclick="WastePage()"&gt;&lt;/input&gt;
           &lt;input title="Metrics Initializer" type="gearbutton" onclick="MetricsPage()"&gt;&lt;/input&gt;
           &lt;input title="Safety Entry" type="safetybutton" onclick="SafetyEntryPage()"&gt;&lt;/input&gt;
           &lt;input title="Trending" type="trendbutton" onclick="Trending()"&gt;&lt;/input&gt;
           &lt;input title="Alarm and Events" type="alarmbutton" onclick="Alarm()"&gt;&lt;/input&gt;
           &lt;input title="Report Expert" type="expertbutton" onclick="ReportExpert()"&gt;&lt;/input&gt;
           &lt;input title="Data Entry Reports" type="ssrsbutton" onclick="DataEntrSSRS()"&gt;&lt;/input&gt;   
        &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>function PreviousPage() {
      window.history.back()
  }
  function WastePage() {
      document.getElementById("h1").innerHTML = "Waste Page";
      document.getElementById("GlobalFrame").src = "WasteEntryForm.html";
  }
  function SafetyEntryPage() {
      document.getElementById("h1").innerHTML = "Safety Page";
      document.getElementById("GlobalFrame").src = "SafetyEntryForm.html";
  }
  function MetricsPage() {
      document.getElementById("GlobalFrame").src = "MetricsEntryForm.html";
  }
  </code></pre>