HTML中如何传递iframe名称复用脚本实现多iframe切换

架构老林

2026-6-15

解决方案

你的问题核心是函数里硬编码了frame1，没有用到传入的FrameN参数，只要把动态参数替换掉固定值，再优化重复代码即可实现多按钮对应多iframe的复用。

关键修改点

把函数中查询iframe的选择器从固定的[name=frame1]改成动态的[name="${FrameN}"]（用ES6模板字符串拼接参数）
重复的DOM查询操作提取到变量里，避免重复查找提升效率
简化显示状态切换的判断逻辑

修改后的完整代码

<!-- 第一个按钮和对应iframe -->
<input type="button" class="btn btn-default" value="Grindarna" id="myButton1" onClick="changetext('myButton1','Grindarna','frame1')">
<div class="iframes">
  <iframe name="frame1" allowfullscreen style="display: none" frameborder="1" height="230" width="700px" src="../texter/byggnader-herrgarden-info.htm" target="_blank"></iframe>
</div>

<!-- 第二个按钮和对应iframe示例 -->
<input type="button" class="btn btn-default" value="Another Content" id="myButton2" onClick="changetext('myButton2','Another Content','frame2')">
<div class="iframes">
  <iframe name="frame2" allowfullscreen style="display: none" frameborder="1" height="230" width="700px" src="../texter/another-page.htm" target="_blank"></iframe>
</div>

<script>
function changetext(buttonId, originalText, frameName) 
{
  const button = document.getElementById(buttonId);
  // 动态获取对应的iframe
  const iframe = document.querySelector(`.iframes [name="${frameName}"]`);
  
  if (!button || !iframe) return; // 容错：找不到元素就终止执行

  if (button.value === originalText) {
    button.value = "Stäng";
    iframe.style.display = "block";
  } else {
    button.value = originalText;
    iframe.style.display = "none";
  }
}
</script>