使用HTML页面中的按钮打开不同的Iframe

Question

我想从页面上的不同输入按钮使用相同的脚本，加载不同的 iframe。 我能够将按钮 ID 和按钮值传递给该函数。 但是如何将框架名称传递给函数？

我的代码可以工作，但仅适用于一个名为“frame1”的 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>

<script>
function changetext(Butto, KnappText, FrameN) 
{
var elem = document.getElementById(Butto);
if (elem.value==KnappText)
    { 
    elem.value = "Stäng";
    const el = document.querySelector('.iframes [name=frame1]');
    el.style.display = el.style.display === 'block' ? '' : 'block';
    }
else
    {
    elem.value = KnappText;
    const el = document.querySelector('.iframes [name=frame1]');
    el.style.display = el.style.display === 'none' ? '' : 'none';
    }
}
</script>

Answer 1

节省空间并使用一个可以打开多个

<iframe>

锚的

<a>

。对于每个链接，为其

href

分配不同的 url，并将

<iframe>

name

分配给每个链接的

target

属性。

<a hfre="https://example.com" target="frame">EXAMPLE</a>

<iframe name="frame"></iframe>

<a href="https://example.com" target="frame">EXAMPLE</a>

<a href="https://m.google.com/" target="frame">GOOGLE - MOBILE</a>

<a href="https://www.amp-what.com/" target="frame">AMP-WHAT</a>
<iframe name="frame"></iframe>