如何使用相同的类，名称更改iframe src？

Question

<iframe id="chgMe" src="Source1.htm">Frames are not supported on your browser.</iframe>

<button onclick="document.getElementById('chgMe').src='Source2.htm'">Next</button>

它运作良好，但是当生成2个或多个具有相同ID，第二，第三，第四等ID的iframe时，iframe无法响应。 我尝试了document.getElementByTagName(); 和document.getElementByName(); 但没有任何效果

Answer 1

不允许多个具有相同id元素。

<button id="change_src">Next</button>

jQuery的

$('#change-src').on('click', function() {
  $('#chgMe').attr('src', 'Source2.htm?' + (new Date()).getTime();
});

---

您可以为自己的id维护一个模式，例如chgMe_1, chgMe_2等，并修改您的代码，如下所示：

$('#change-src').on('click', function() {
  $('[id*=chgMe_]').attr('src', 'Source2.htm?' + (new Date()).getTime();
});

它将选择id包含chgMe_所有iframe 。

---

或者，您也可以对所有iframe使用通用class ，并按如下方式使用：

$('#change-src').on('click', function() {
  $('.common_cls_name').attr('src', 'Source2.htm?' + (new Date()).getTime();
});

注意

(new Date()).getTime()仅用于防止缓存，以上所有代码都会更改所有iframe的src （根据您的问题） 。

Answer 2

您可以编写一个用于创建新iframe的函数（如果尚未创建），为其分别指定ID chgMe0，chgMe1，chgMe2等，然后在单击“下一步”按钮时调用另一个函数，该操作像这样：

var framecount; // global variable that counts all frames

function next(nextpage)
{
    var i;
    for(i=0;i<framecount;i++)
    {
        document.getElementById("chgMe"+i).src=nextpage;
    }

}

Answer 3

ID属性必须唯一，可以使用类，或者在添加IFrame时生成新ID。