javascript - 如何阻止HTML代码运行？

Question

我寻求在单个页面上嵌入多个 iframe，而不减慢页面速度。当我嵌入单个 iframe 时，它​​运行顺利；添加了第二个和第三个，尽管一次只显示一个(使用 JScript)，但所有的速度都较慢。我认为这是由于 iframe 代码仍在执行所致。

如何有条件地执行代码？就我而言，每当单击按钮时。

感谢您的帮助。

---

查找我使用的确切代码，其中实际内容由 ID 替换，iframe 由 p 替换:http://jsfiddle.net/aof89Ljt/55/

HTML iframe:

<p id="ifr1">
  ifr1
</p>
<p id="ifr2" style="display:none;">
  ifr2
</p>
<p id="ifr3" style="display:none;">
  ifr3
</p>

更新:包含 JScript 的新 JFiddle 链接。最终目标描述:我单击一个按钮，该按钮显示不同的嵌入式 Desmos 图，然后是另一个图，然后是第一个图 - 循环一次，一次一个(参见代码)。演示gif:https://puu.sh/Bjpil/da9a038e11.gif

更新2:找到解决方案；完整代码:https://jsfiddle.net/32uxrhmw/49/

更新3:大幅优化的代码:https://jsfiddle.net/32uxrhmw/92/

Answer 1

您需要添加onclick="<your function>"事件触发器到您想要“做某事”的元素。

简单的例子:

<button onclick="swap()">Button</button>

<iframe style="display: none;" data-url="https://www.example.com" id="iframe">
  <p>Your browser does not support iframes.</p>
</iframe>
  
<script>
function swap() {
e = document.getElementById('iframe'); // get iframe
url = e.dataset.url; // get desired url attribute stored in data-url
e.setAttribute("src", url); // add the iframe src with desire url
e.removeAttribute("style"); // remove styling that hid it otherwise
}
</script>

已更新以更好地适用于问题。

再次更新，还纳入了@Joe Fitzsimmons 重新处理 iframe 源的好建议(在他的回答中)。

最后添加查看您的代码:

看看你最后的代码，看来你想做的是:

1. 使用一个 iframe 加载页面；

2. 然后更改单击按钮时显示的 iframe。

如果这就是您想要的，您可能需要使用这个更简单的代码:

(注意:我使用您的代码示例作为基础，但没有插入任何 src url - 您的可能是私有(private)的，但即使不是，它们也会显示相同的结果，因此可能会让其他读者感到困惑)

<style> 
.tdropbtn {
  background-color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
  color: #0066CC;
}
</style>

<center>
<iframe id="frame" src="https://url1" width="500px" height="400px" frameborder=0></iframe>
</center>


<div style="display:inline;">
  <center>
    <button onclick="swap()" class="tdropbtn">[+]</button>
  </center>
</div>

<script>
var counter     = 1;
var firstFrame  = "https://url1";
var secondFrame = "https://url2";
var thirdFrame  = "https://url3";
var e           = document.getElementById("frame");

function swap() {
if (counter == 0){
    e.src = firstFrame;
    counter++;
}
else if (counter == 1){
    e.src = secondFrame;
    counter++;
}
else if (counter == 2){
    e.src = thirdFrame;
    counter = 0;
}
}
</script>