CODEWITHSUNDEEP
javascripthtmliframe
ENGR024
ENGR024

Reputation: 317

Referencing another page and change the iframe content

I am trying to use my Home Page to reference another page and change the content in the iframe of that page and its title using JavaScript. I can change the content when I already am in the page, but when I reference from the home page, it wont change the content of the iframe.

EntryForm.html is the 'master form page' that needs to be able to change the content of the iframe and the title based off when the user clicks the button from the home page. Any help is appreciated.

Home html Page

    <!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8"content="HTML,CSS,XML,JavaScript">
      <script src="Scripts/jquery.js" type="text/javascript"></script>
      <script src="Scripts/Global.js"></script>   
      <script type="text/javascript" src="lib/d3.js"></script>
      <script type="text/javascript" src="Scripts/gauge.js"></script>
      <link rel="stylesheet" type="text/css" href="Styles/Design.css">
   </head>
   <body onload="initialize()">
      <div id="body"><br></div>
      <div id="header">
         <h1>Carrolton Plant</h1>       
         <div id="headerIcon"></div>
         <div id="tv1clock"></div>
      </div>      
      <div id="content"> </div>
        <span id="oeeLine1GaugeContainer"></span>
        <span id="oeeLine2GaugeContainer"></span>
        <span id="oeePlantGaugeContainer"></span>
        <span id="testGaugeContainer"></span>
      <div id="footer">&nbsp;
         <input title="Home Page" type="homebutton"></input>
         <input title="Previous Page" type="previousbutton" onclick="PreviousPage()"></input>
        <a href ="EntryForm.html"onclick="WastePage()"> <input title="Waste Entry Page" type="wastebutton" onclick="WastePage()"></input></a>
         <a href ="EntryForm.html" onclick="MetricsPage()"> <input title="Metrics Initializer" type="gearbutton" onclick="MetricsPage()"></input></a>
         <a href="HeatMap.html"><input title="Heat Map" type="heatbutton"></input></a>
         <a href ="EntryForm.html" onclick="SafetyEntryPage()"> <input title="Safety Entry" type="safetybutton" onclick="SafetyEntryPage()"></input></a>
         <input title="Trending" type="trendbutton" onclick="Trending()"></input>
         <input title="Alarm and Events" type="alarmbutton" onclick="Alarm()"></input>
         <input title="Report Expert" type="expertbutton" onclick="ReportExpert()"></input>
         <input title="Data Entry Reports" type="ssrsbutton" onclick="DataEntrSSRS()"></input>   
      </div>
   </body>
</html>

Entry Form 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
       <script src="Scripts/jquery.js" type="text/javascript"></script>
      <script src="Scripts/Global.js" type="text/javascript"></script>
      <script type="text/javascript" src="Scripts/modernizr.custom.86080.js"></script>        
      <link rel="stylesheet" type="text/css" href="Styles/Design.css">
   </head>
   <body>    
       <div id="header">
         <h1 id="h1">Metrics Entry Form</h1>
         <div id="headerIcon"></div>
         <div id="tv1clock"></div>
      </div>
      <center>
      <div id="wrapper">        
            <div id="iFrameHeight">
               <iframe name="iframe" src="MetricsEntryForm.html" scrolling="auto" id="GlobalFrame"></iframe>
            </div>         
      </div>
      </center>
      <div id="footer">&nbsp;
         <a href="HomePage.html"><input title="Home Page" type="homebutton"></input></a>
         <input title="Previous Page" type="previousbutton" onclick="PreviousPage()"></input>
         <input title="Waste Entry Page" type="wastebutton" onclick="WastePage()" ></input>
         <input title="Metrics Initializer" type="gearbutton" onclick="MetricsPage()"></input>
         <a href="HeatMap.html"><input title="Heat Map" type="heatbutton"></input></a>
         <input title="Safety Entry" type="safetybutton" onclick="SafetyEntryPage()" ></input>
         <input title="Trending" type="trendbutton" onclick="Trending()"></input>
         <input title="Alarm and Events" type="alarmbutton" onclick="Alarm()"></input>
         <input title="Report Expert" type="expertbutton" onclick="ReportExpert()"></input>
         <input title="Data Entry Reports" type="ssrsbutton" onclick="DataEntrSSRS()"></input>   
      </div>
   </body>
</html>

JavaScript

function WastePage() {
    document.getElementById("h1").innerHTML = "Waste Entry Form";
    document.getElementById("GlobalFrame").src = "WasteEntryForm.html";
}
function SafetyEntryPage() {
    document.getElementById("h1").innerHTML = "Safety Entry Form";
    document.getElementById("GlobalFrame").src = "SafetyEntryForm.html";
}
function MetricsPage() {
    document.getElementById("h1").innerHTML = "Metrics Entry Form";
    document.getElementById("GlobalFrame").src = "MetricsEntryForm.html";
}

Upvotes: 0

Views: 749

Answers (1)

Heath
Heath

Reputation: 76

Move the iframe to the home page and remove the Entry.html page completely. That page seems worthless considering what you are trying to do. Then remove the anchor tags from the Waste, Metrics, and Safety links. Here is the updated home.html:

  <div id="body"><br></div>
  <div id="header">
     <h1>Carrolton Plant</h1>       
     <div id="headerIcon"></div>
     <div id="tv1clock"></div>
  </div>      
  <div id="content">
    <center>
      <div id="wrapper">        
        <div id="iFrameHeight">
           <iframe name="iframe" src="MetricsEntryForm.html" scrolling="auto" id="GlobalFrame"></iframe>
        </div>         
      </div>
    </center>
   </div>
    <span id="oeeLine1GaugeContainer"></span>
    <span id="oeeLine2GaugeContainer"></span>
    <span id="oeePlantGaugeContainer"></span>
    <span id="testGaugeContainer"></span>

  <div id="footer">&nbsp;
     <input title="Home Page" type="homebutton"></input>
     <input title="Previous Page" type="previousbutton" onclick="PreviousPage()"></input>
   <input title="Waste Entry Page" type="wastebutton" onclick="WastePage()"></input>
     <input title="Metrics Initializer" type="gearbutton" onclick="MetricsPage()"></input>
     <a href="HeatMap.html"><input title="Heat Map" type="heatbutton"></input></a>
    <input title="Safety Entry" type="safetybutton" onclick="SafetyEntryPage()"></input>
     <input title="Trending" type="trendbutton" onclick="Trending()"></input>
     <input title="Alarm and Events" type="alarmbutton" onclick="Alarm()"></input>
     <input title="Report Expert" type="expertbutton" onclick="ReportExpert()"></input>
     <input title="Data Entry Reports" type="ssrsbutton" onclick="DataEntrSSRS()"></input>   
  </div>

Also add this function to your javascript file

function HomePage() {
    document.getElementById("h1").innerHTML = "Carrolton Plant";
    document.getElementById("GlobalFrame").src = "MetricsEntryForm.html";
}

That is what I would do anyways.

Upvotes: 1

Related Questions