Question

我写了一个简单的函数来更改iframe的src属性，这就是代码：

function open(dat) {
 document.getElementById('frame1').src = dat;
}

我以这种方式调用函数：

<table id="maintab1" align="center" border="0" style="width:95%">
      <tr>
        <td width="50%" onclick="open('/timetrials/european/mushroom.php');"> text </td>
        <td width="50%" onclick="open('/timetrials/european/flower.php');" > text </td>
      </tr>
</table>

当然，iframe的id为'frame1'，如您所见：<iframe id="frame1" src="/timetrials/european/mushroom.php" >You browser does not support iframes.</iframe>。首先在iframe上正确加载页面。

点击<td>，而不是更改我的iframe的src，我看到一个新的空白页面会永远加载而不会得到结果。

你知道为什么吗？

Answer 1

再次，内联js的邪恶是明确的！这是因为window有一个名为open的属性，当您使用onlick="open()"时，您正在调用错误的open()！不要使用内联js！

阅读其中一些结果： Why is inline JS bad?

解决整个问题的简单方法只是使用iframe定位iframe：

<a href="new/iframe/path" target="myiframe">Change iframe path!</a>
<iframe name="myiframe"></iframe>

改善您当前的代码：

<强> Live demo here (click).

<强>标记：

<table id="maintab1" >
  <tr>
    <td width="50%" data-open="/timetrials/european/mushroom.php');">Mushroom</td>
    <td width="50%" data-open="/timetrials/european/flower.php');" >Flower</td>
  </tr>
</table>

<强> JavaScript的：

//get element references
var tds = document.querySelectorAll('#maintab1 td');

//loop each element
for (var i=0; i<tds.length; ++i) {
  //register click function
  tds[i].addEventListener('click', myClickFunc); 
}

function myClickFunc(event) {
  var link = this.getAttribute('data-open');
  openIframe(link);
}

//also note that camelCase naming is standard
function openIframe(link) {
  console.log(link);
}

有很多方法可以做到这一点，但关键是用javascript获取元素引用并在其中附加click函数。根据需要选择它们 - id，class，selector，或者你甚至可以用javascript创建元素本身！您可以将它们存储在javascript中的数组中，然后将它们拉出循环中的每个元素（第一个元素将从数组中获取第一个链接等），而不是像在我的示例中那样将数据存储在元素上。

Answer 2

我通过更改功能名称解决了我的问题。名称function open(dat)导致与window.open

发生冲突

function open_iframe(dat) {
 document.getElementById('frame1').src = dat;
}

这是我写的新代码，现在很好。

名为“open”的函数会加载一个新页面 - 尝试使用内联JS更改iframe src

2 个答案:

改善您当前的代码：