Using hidden iFrames to change a
's innerHTML

Question

I'm trying to have a <div>'s content change to an external HTML file's content when a button is clicked. Even better if I can change it to an external HTML file's specific <div>, but, baby steps.

I'm aware that what I'm trying to do would be easier with ajax or jQuery, but I'm hoping to get a solid basis in Javascript, HTML, and CSS before I tackle those.

The issue is that I can't figure out how to point to the content in test.html without it returning just a straight URL:

allCalcs.html:

<!DOCTYPE html>
  <head>
      <title>Toying with iFrames</title>
  </head>
  <body>
      <script src="allCalcs.js"></script>
        <a href="#" id="Home" onclick="showCalc()">Home</a>

        <div id="content">currently unchanged</div>

        <iframe frameborder="0" id="testFrame" scrolling="no" allowtransparency="true" style="left:0px; top:0px; width:100%; height:1px" src="test.html">
        content inside the iframe that shouldn't display instead of test.html
        </iframe>
  </body>
</html>

allCalcs.js

//this should make something appear below the clicky
function showCalc(){
  iFrameName = document.getElementById("testFrame");
  iFrameName.style.display="block";
  document.getElementById("content").innerHTML=iFrameName.innerHTML;
}

test.html

This is test.html

EDIT: With function show() revised to the below, attempting to pull the iframe's contents with iframe.contentDocument.body.innerHTML, it still isn't working: EDIT2: The below does work, but only when the file is hosted on a webserver. It won't work locally.

function show()
{
    var iframe= document.getElementById("testFrame");
    var iframe_contents = iframe.contentDocument.body.in‌nerHTML;
    document.getElementById("content").innerHTML= iframe_contents;
}

You need to fetch `iFrameName.contentDocument.body.innerHTML` — Blazemonger, Jan 21 '16 at 19:14
like `document.getElementById("content").innerHTML=iFrameName.contentDocument.body.innerHTML;` that? It doesn't seem to be working... — Caleb Jay, Jan 21 '16 at 19:17
Odd, I outright downloaded those files and tried to run them locally. They worked in the online thingy you linked, but they aren't working when I open `index.html` in chrome. — Caleb Jay, Jan 21 '16 at 19:33
Your solution works when the files are all on my webserver. Why wouldn't they work locally? — Caleb Jay, Jan 21 '16 at 19:47

Using hidden iFrames to change a 's innerHTML

0 Answers0

Using hidden iFrames to change a
's innerHTML