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"。再次单击它，使用空白iframe隐藏div。

提前致谢！

（拜托，没有jQuery的答案。）

Answer 1

如果不向iframe添加ID，请使用此代码：

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

或基于名称：

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

如果你要添加一个id：

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

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

Answer 2

为某些HTML元素添加了ids。

<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

应该类似于以下内容。在onclick td事件上调用此函数，并在参数中传递所需的src。

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

使用javascript更改iframe的src

3 个答案: