如何更改具有相同类、名称的 iframe src

How to change iframes src with same classes, names?

本文关键字：iframe src 同类 何更改      更新时间：2023-09-26
<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();但没有任何效果

你可以

编写一个函数来创建一个新的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;
    }
}
ID

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

不允许使用具有相同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();
});

这将选择包含chgMe_的所有iframe id .

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

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

注意

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

相关文章：