Question

我在我的所有网站上使用相同的页面，只有正文内容发生变化，而不是使用链接我想使用按钮来加载页面内容。这是我的主要HTML页面

<button id="b1"> button 1</button>
<button id="b2"> button 2</button>
<div> <iframe id="iFrame"></iframe> </div>

我希望button1和button2在点击时加载2个不同的页面page1和page2

Answer 1

您可以使用javascript。你的HTML代码应该是这个。

<button id="b1" onClick="b1()"> button 1</button>
<button id="b2" onClick="b2()"> button 2</button>
<div> <iframe id="iFrame"></iframe> </div>

你的javascript代码应该是这个。请记住用您想要的文件名替换iframe.src的值。

<script>
var iframe=document.getElementById("iFrame");
function b1() {
iframe.src = "page1.html";
}
function b2() {
iframe.src = "page2.html";
}
</script>

Answer 2

这就是我接近这个的方法：

＆＃13;

Array.prototype.forEach.call(document.querySelectorAll('[data-url]'), elem => {
  elem.addEventListener('click', function(e) {
    iFrame.src = this.dataset.url
  })
})

＆＃13;

[data-url]::after {
  content: attr(data-url)
}

#iFrame { /* this is for demo purposes only */
  min-height: 400px;
  width: 1024px;
}

＆＃13;

<button data-url="https://connexo.de"></button>
<button data-url="https://connexo.de/kontakt.php"></button>
<div> <iframe id="iFrame"></iframe> </div>

＆＃13;

如果您需要有关此任何部分的详细信息，请让我确切地知道您不清楚的内容。

请注意，上面的代码片段使用的是Arrow函数，它是ECMAScript 6的一部分（Javascript的官方名称是ECMAScript）。

这是ES5版本，据说可以在你的Dreamweaver中使用：

＆＃13;

Array.prototype.forEach.call(document.querySelectorAll('[data-url]'), function(elem) {
  elem.addEventListener('click', function(e) {
    iFrame.src = this.dataset.url
  })
})

＆＃13;

[data-url]::after {
  content: attr(data-url)
}

#iFrame { /* this is for demo purposes only */
  min-height: 400px;
  width: 1024px;
}

＆＃13;

<button data-url="https://connexo.de"></button>
<button data-url="https://connexo.de/kontakt.php"></button>
<div> <iframe id="iFrame"></iframe> </div>

＆＃13;

这是HTML版本，您可以将其复制/粘贴到HTML文件中：

＆＃13;

<style type=text/css>
  [data-url]::after {
    content: attr(data-url)
  }
  
  #iFrame {
    /* this is for demo purposes only */
    min-height: 400px;
    width: 1024px;
  }
</style>

<button data-url="https://connexo.de"></button>
<button data-url="https://connexo.de/kontakt.php"></button>
<div> <iframe id="iFrame"></iframe> </div>

<script>
  /* it is important you put the script part after the HTML with the buttons */
  Array.prototype.forEach.call(document.querySelectorAll('[data-url]'), function(elem) {
    elem.addEventListener('click', function(e) {
      iFrame.src = this.dataset.url
    })
  })
</script>

＆＃13;

Answer 3

这是我在这个问题上的第二个答案。您可以删除javascript部分并仅使用此HTML代码。

<button id="b1" onClick="document.getElementById('iFrame').src = 'page1.html'"> button 1</button>
<button id="b2" onClick="document.getElementById('iFrame').src = 'page2.html'"> button 2</button>
<div> <iframe id="iFrame"></iframe> </div>

如何使按钮加载iFrame内容

3 个答案: