изменить ГКЗ в 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/"; 

Если бы добавить a id:

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

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

Answer 2

Добавлены идентификаторы некоторых элементов 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'; 
    } 
    } 
} 

Answer 3

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

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