如何使用相同的类，名称更改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

不允许使用具有相同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包含id的所有chgMe_个。

---

或者，您可以对所有class使用通用iframe，并使用以下内容：

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

注意

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

Answer 2

你可以编写一个用于创建新iframe的函数（如果你还没有），给每个人提供id chgMe0，chgMe1，chgMe2，...然后点击“Next”按钮调用另一个函数，这样做的事情是这样的：

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。