如何防止 HTML 代码来自运行？

Question

我试图在不减慢页面速度的情况下在单个页面上嵌入多个 iframe。当我嵌入单个 iframe 时，运行很顺利；添加了第二个和第三个，但都变慢了——尽管一次只显示一个（使用 JScript）。我认为这是由于 iframe 代码仍在执行。

如何有条件地执行代码？在我的例子中，只要单击一个按钮。

感谢帮助。

Fiddle 我使用的确切代码，实际内容由 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 link。最终目标描述：我单击一个按钮，该按钮显示一个不同的嵌入式 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>" 事件触发器添加到您想要 "do something" 的元素。

简单示例：

<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 url - 你的可能是私人的，但即使不是他们都显示相同的结果，所以它可能会混淆其他读者）

<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

一个想法是 load/remove iframe onClick 的来源。

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

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

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

如何防止 HTML 代码来自运行？

How to prevent HTML code from running?

html

javascript

performance

processing-efficiency

如何防止 HTML 代码来自 运行？

How to prevent HTML code from running?

html

javascript

performance

processing-efficiency

如何防止 HTML 代码来自运行？