изменить SRC iframe, используя JavaScript

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>

Мне бы хотелось иметь возможность щелкнуть любую ячейку в таблице, получить значение внутри, показать div и добавить iframe src на основе значения ячейки. Когда пользователь снова нажимает на ячейку, iframe становится пустым, а div скрывается.

Например: щелкните ячейку one, покажите div с iframe src="/one.html". Нажмите еще раз, скройте div с пустым iframe.

Заранее спасибо!

(Пожалуйста, не отвечайте jQuery.)

Answer 1

Без добавления идентификатора к iframe используйте это:

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

Или на основании имени:

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

Если вы добавите идентификатор:

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

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

Answer 2

Это должно быть что-то вроде ниже. Вызовите эту функцию на onclick событии td и передайте желаемое src в параметре.

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

Answer 3

Добавлены идентификаторы для некоторых элементов HTML.

<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>

И 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';
    }
  }
}