使用javascript更改iframe的src

Question

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

<div id="numbers">
  <iframe name="letters" src="">
  </iframe>
</div>

I'd like to have the ability to click on any cell in the table, grab the value inside, show the div and append the iframe src based on the cell's value. When the user clicks on the cell again the iframe becomes blank and the div is hidden.

For example: click cell one , show the div with the iframe src="/one.html" . Click it again, hide the div with a blank iframe .

Thanks in advance!

(Please, no jQuery answers.)

Answer 1

Without adding an id to the iframe use this:

document.getElementsByTagName("iframe")[0].src="http://example.com/";

Or based on the name:

document.getElementsByName("letters")[0].src="http://example.com/";

If you would add a id:

<iframe name="letters" id="letterframe" src="" />

document.getElementById("letterframe").src="http://example.com/";

Answer 2

Added ids to some of the HTML elements.

<table id="table">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

<div id="numbers">
  <iframe id="iframe" name="letters" src="">
  </iframe>
</div>

And the javascript

document.getElementById('table').onclick=function(e){
  e = e || window.event;
  e=e.target || e.srcElement;
  if(e.tagName.toLowerCase()=='td'){
    var page = e.innerHTML,iframe=document.getElementById('iframe');
    if(iframe.src.indexOf(page)>-1){
      document.getElementById('numbers').style.display='none';
    }
    else{
      document.getElementById('numbers').style.display='block';
      iframe.src='/'+page+'.html';
    }
  }
}

Answer 3

It should be something like below.Call this function on onclick event of td and pass desired src in parameter.

  <script type=”text/javascript”>
    function changeURL(srcvalue)
    {
    document.getElementById('letters').src=srcvalue;
    }
    </script>