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

Question

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

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()" 时，您调用了错误的 打开()!不要使用内联 js!

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

解决整个问题的一个简单方法就是像这样使用针对 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 获取元素引用并在其中附加点击功能。随心所欲地选择它们 - id、class、选择器，或者您甚至可以使用 javascript 创建元素本身!与其像我的示例中那样将数据存储在元素上，不如将它们存储在 javascript 中的数组中，然后为循环中的每个元素拉出它们(第一个元素将从数组中获取第一个链接，等等)。