Question

我希望在单个页面上嵌入多个iframe，而不会降低页面的速度。当我嵌入单个iframe时，它运行平稳；添加了第二个和第三个，并且都变慢了-尽管一次只显示一个（使用JScript）。我认为这是由于iframe代码仍在执行。

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

我们非常感谢您的帮助。

摆弄我使用的确切代码，将实际内容替换为ID，并将iframe替换为p：http://jsfiddle.net/aof89Ljt/55/

iframe的

HTML ：

<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源的好建议（在他的回答中）。

最后添加您的代码：

看看您的最后一个代码，看来您想要做的是：

使用一个iframe加载页面；
然后更改单击按钮时显示的iframe。

如果这是您想要的，则可能需要使用以下简单的代码：

（注意：我以您的代码示例为基础，但未插入任何src网址-您的网址可能是私有的，但即使它们没有显示相同的结果，也可能使其他读者感到困惑）

<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>

Answer 2

一个想法是加载/删除iframe onClick的源。

这是您可以做什么的粗略想法：

function Swap(id, url) {
 document.getElementById(id).src = url;
}

您还必须显示和隐藏iFrame。希望这可以帮助您。我不确定您的最终目标是什么。

如何阻止HTML代码运行？

2 个答案: