0

我目前有一些看起来像这样的 Javascript：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
function changeSource(newSource) {
  document.getElementById('preview').src = newSource;
}
});
</script>

然后我有一些看起来像这样的 HTML：

<table border=0 class="colors">
  <tbody>
    <tr>
      <td><a onclick="changeSource('http://www.test.com')"><img width="40" src="test.png"/></a></td>
    </tr>
  </tbody>
</table>

然后是 iframe 部分：

<table border=0>
  <tbody>
    <tr>
      <td><iframe id="preview" width="125" height="303" src="test.php" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe></td>
    </tr>
  </tbody>
</table>

但是，点击标签中的图像，Iframe 的来源不会改变。为什么会这样？

4

2 回答 2

2

您收到一个错误，因为该函数是一个本地方法，因为您将它隐藏在 onready 函数中。该示例不需要 onready 调用。

<script>
$(document).ready(function(){
function changeSource(newSource) {
  document.getElementById('preview').src = newSource;
}
});
</script>

需要是

<script>
  function changeSource(newSource) {
      document.getElementById('preview').src = newSource;
  }
</script>

更好的是，不需要 JavaScript！使用应该使用的 HTML。使用目标属性。

<td><a href="http://www.example.com" target="preview"><img width="40" src="test.png"/></a></td>
于 2013-01-15T21:43:33.623 回答
0

您正在使用 jquery。更好地利用。

$(文档).ready(函数(){
    // 为具有类颜色的表选择锚标记
    $("table.colors a").click(function(e){
        e.preventDefault();
        var newSource = $(this).attr("href");
        $("#preview").attr({"src" : newSource});
    });
});

无需通过添加onclick属性或 target 属性来弄乱 html。但是 html 的target属性是最可取的。

<table border=0 class="colors">
  <tbody>
    <tr>
      <td><a href="http://www.test.com"><img width="40" src="test.png"/></a></td>
    </tr>
  </tbody>
</table>
于 2013-10-22T04:51:11.060 回答