JS动态添加iframe的代码

下面详细讲解一下“JS动态添加iframe的代码”的完整攻略。

什么是iframe？

iframe (即内嵌框架) 是 HTML 语言中一种非常强大的标签，可以将一个HTML文档文件嵌入到另一个 HTML 文档中，以达到创建分页面的效果。

如何动态添加iframe

在 JavaScript 中，可以通过以下代码，动态地添加 iframe：

var iframe = document.createElement("iframe");
iframe.setAttribute("width", "100%");
iframe.setAttribute("height", "500");
iframe.setAttribute("src", "http://www.example.com");
document.body.appendChild(iframe);

• 首先，我们通过 JavaScript 中的 createElement 方法，创建了一个 iframe 元素；
• 然后，通过 setAttribute 方法来设置该元素的 width、height和 src 属性；
• 最后，通过 appendChild 方法，将这个元素添加到当前页面中。

这样，就完成了一个简单的动态添加 iframe 的过程。

示例1: 对于页面中的链接，我们可以通过获取到链接的地址，在后面加上 ?frame，然后将该地址设置成新 iframe 的 src 属性，以达到想要的效果。

<a href="http://www.example.com/" target="_blank" class="open-in-iframe">打开新页面</a>
<script>
var btns = document.querySelectorAll(".open-in-iframe");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(event) {
    event.preventDefault();
    var url = this.href + "?frame";
    var iframe = document.createElement("iframe");
    iframe.setAttribute("width", "100%");
    iframe.setAttribute("height", "500");
    iframe.setAttribute("src", url);
    document.body.appendChild(iframe);
  });
}
</script>

示例2: 在页面中直接使用 JavaScript，通过 prompt 获取一个网址，并将其作为 iframe 的地址，添加到页面中。

<button id="open-iframe-btn">打开一个网址</button>
<script>
var btn = document.querySelector("#open-iframe-btn");
btn.addEventListener("click", function(event) {
  event.preventDefault();
  var url = prompt("请输入网址：");
  if (!url) {
    return;
  }
  var iframe = document.createElement("iframe");
  iframe.setAttribute("width", "100%");
  iframe.setAttribute("height", "500");
  iframe.setAttribute("src", url);
  document.body.appendChild(iframe);
});
</script>

以上就是“JS动态添加iframe的代码”的完整攻略，希望对您有所帮助！