Javascript 如何防止HTML代码运行？

我试图在一个页面上嵌入多个iframe，而不会减慢页面速度。当我嵌入单个iframe时，它运行平稳；添加了第二个和第三个，所有的都变慢了——尽管使用JScript一次只显示一个。我认为这是由于iframe代码仍在执行

如何有条件地执行代码？在我的例子中，每当单击按钮时

谢谢你的帮助。Fiddle用于我使用的确切代码，实际内容由ID替换，iFrame由p替换：

iFrame的HTML：

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

更新：包含JScript的新JFIDLE链接。最终目标描述：我单击一个按钮，它会显示一个不同的嵌入式Desmos图，然后是另一个图，然后是第一个图-在一个循环中，一次一个查看代码。演示gif：

更新2：找到解决方案；完整代码：

更新3：大大优化了代码：

您需要将onclick=event触发器添加到您想要执行某项操作的元素中

简单的例子：

按钮 您的浏览器不支持iFrame

功能交换{ e=document.getElementById'iframe'；//获取iframe url=e.dataset.url；//获取存储在数据url中的所需url属性 e、 setAttributesrc，url；//使用所需url添加iframe src e、 removeAttributestyle；//删除以其他方式隐藏它的样式 }

---

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

这是您可以做的大致想法：

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

---

您还必须显示和隐藏iFrame。希望这能让你上路。我不确定您的最终目标是什么。

您的意思是只显示第一个iframe，然后单击一个按钮或在某个事件上隐藏第一个iframe，然后显示第二个iframe，依此类推？最好将iframe放在元素的data属性上，当您单击按钮时，您可以从data属性获取它，并将其设置为元素的innerHTML。更正@DeepakSharmaUnsure这是如何工作的@Muhammad@OverLordGoldDragon-我想你是新来的，所以，正如你所知道的，不断扩大你的调查范围通常被认为是拙劣的。人们放弃了回答你的时间，然后你改变了竞争环境。在将来，你应该尝试将你的问题分解为单个问题，并分别发布它们-例如1个带有iFrame的初始页面加载问题，2个你的“循环”效果等。至于循环效果，你是如何做到的-像你的例子中那样加载gif？如果是这样，您可能只想以我为iframe建议的相同格式加载图像。Notepad++无法将“数据url”识别为有效的HTML属性，并且iframe不再呈现。此外，如果在iframe中设置url，那么在函数中设置url有什么意义？@OverLordGoldDragon-这是一种正常的属性模式，在浏览器中也可以使用。请参阅：@OverLordGoldDragon-如果您运行代码，将显示iframe。它最初是隐藏的，所以你不会得到一个丑陋的空方块。它不在iframe的src属性中设置，因为这将导致它在页面加载时加载-这是您想要的-即不减慢初始页面加载，并且仅在单击按钮时加载。@overordgolddragon-几乎。数据url是存储url值的位置。因此，将url放在您拥有的位置，而不是函数中。在函数中有url的地方，用带引号的src替换它-这使它对我起作用。@OverLordGoldDragon-另外，作为旁白，您可能应该避免使用该元素-虽然浏览器仍然支持它，但它是一个obselete元素，请参见：。相反，仅在需要时直接使用包装器元素设置元素的样式。