javascript - 如何更改具有相同类、名称的 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 的 iframe 时，第二个、第三个、第四个等 iframe 没有响应。我试过了document.getElementByTagName();，document.getElementByName();但没有任何效果

Answer 1

你可以编写一个函数来创建一个新的 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 2

ID 属性必须是唯一的，请改用类，或者在添加 IFrame 时生成新的 ID。

Answer 3

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();
});

这将选择所有iframe的idcontains chgMe_。

---

或者，您也可以使用一个通用class的iframe，如下所示：

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

笔记

(new Date()).getTime()只是为了防止缓存，所有上述代码都会改变src（iframe根据你的问题）。