一键切换iFrame

时间:2018-09-20 07:25:38

标签: javascript jquery iframe

预先感谢您的帮助! 我的JavaScript技能非常有限。

我正在使用一个wordpress网站,试图在两个iFrame之间切换。

我有一个有效的代码,但我想将按钮设为一个按钮,而不是目前的两个按钮。我搜索了几个小时,似乎找不到解决方法。

此外,我不能使用jquery。

这就是我所拥有的,谢谢!

var buttonOne = document.getElementById("one");
var buttonTwo = document.getElementById("two");
var iframe = document.getElementById("iframe");

buttonOne.addEventListener("click", buttonClick, false);
buttonTwo.addEventListener("click", buttonClick, false);

function buttonClick(e){
    if(e.target.id === "one"){
        iframe.src = "https://www.google.com/";
    }else{
        iframe.src = "https://www.ask.com/";
    } 
};
<button id="one">List View</button>
<button id="two">Calendar View</button>
<iframe id="iframe" src="https://www.google.com/" frameborder="0" width="100%" height="1115px"></iframe>

2 个答案:

答案 0 :(得分:0)

尝试使用src

数组

var btn = document.getElementById("btn");
var iframe = document.getElementById("iframe");
var srcs = ["https://www.google.com/", "https://www.ask.com/"];
var i = 0;
btn.addEventListener("click", buttonClick, false);

function buttonClick(e) {
  iframe.src = srcs[i];
  console.log('loading src', srcs[i]);
  i = ((1 + i) % srcs.length);
};

btn.click(); /* load first on page load */
<button id="btn">Toggle View</button>
<iframe id="iframe" frameborder="0" width="100%" height="1115px"></iframe>

答案 1 :(得分:0)

您可以检查以下代码:
创建HTML:

daggerVersion = '2.16'//2.17

JavaScript代码:

roomVersion = '2.0.0-alpha1'//'2.0.0-beta01'