使用 JavaScript 更改 <iframe> 的来源答案

【问题标题】：Use JavaScript to change source of <iframe>使用 JavaScript 更改 <iframe> 的来源
【发布时间】：2015-11-16 17:24:41
【问题描述】：

代码如下：

<!DOCTYPE html>
 <html>
  <head>
   <script>
 var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
   </script>
  </head>
  <body>
   <iframe onload="this.src=URL" height="610px" width="1320" id="window"></iframe>
  </body>
</html>

我正在尝试让文件将 URL 加载到 <iframe>，但是当它完成加载 URL 时，由于 onload 属性，它会重新加载。我应该使用另一个属性吗？提前致谢。

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

由于沙盒环境，很难在在线编辑器上使用 iframe，但在正常情况下它会表现正常。作为有效测试，您可以输入 http://example.com 它已被列入白名单。

更新

添加了一个 PLUNKER，因为 SO 沙盒 iframe。

编辑

我添加了另一种方式来操作您可能感兴趣的 iframe。它只涉及 HTML，不涉及 JS。请注意 anchor 到 example.com。基本上你需要做的就是：

在 iframe 中添加 name 属性（我的 id 和名称总是相同的）
在锚点上，将target 属性值更改为iframe 的name 值。

所以在这个演示中，{{{...}}} 中的部分就是诀窍。添加括号是为了强调不要将它们包含在要使用的代码中。

<a href="http://example.com" {{{target="site"}}}>Example.com</a>

<iframe id="site" {{{name="site"}}} src="/" width="100%" height="100%" frameborder="0"></iframe>

function changeSrc(src) {
  var iframe = document.getElementById('site');
  iframe.src = src;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

<form id="form" onchange="changeSrc(url.value);">
  <fieldset>
    <legend>Enter URL</legend>
    <input id="url">


  </fieldset>
</form>
<a href="https://example.com" target="site">Example.com</a>
<section>
  <iframe id="site" name="site" src="/" width="100%" height="100%" frameborder="0"></iframe>
</section>

【讨论】：

source 的“/”值有什么作用？
它指向root 在这个例子中root 是：stacksnippets.net 我想。

【解决方案2】：

试试这个

<!DOCTYPE html>
<html>
    <head>
        <script>
            var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
            if(URL) document.getElementById('window').src = URL;
        </script>
    </head>
    <body>
            <iframe height="610px" width="1320" id="window">
    </body>
</html>

您在 iframe 上的 onload 属性会在 iframe 加载时触发（而不是在页面窗口加载时），因此它会再次设置 src，然后将页面重新加载到无限循环中。

【讨论】：

【解决方案3】：

<!DOCTYPE html>
 <html>
  <head>
   <script>
 var URL = prompt("Insert URL here", "http://www.example.com"); //Asks user for URL
   </script>
  </head>
  <body>
   <iframe onload="this.src=URL" height="610px" width="1320" id="window"></iframe>
  </body>
</html>

我们可以通过使用 java 的 DOM 更改方法来实现这一点。要获取某物的 SRC，您可以键入

document.getElementById('window').src = URL;

这将获取 ID 为“#window”的元素的 SRC 属性，然后将属性更改为您设置的任何值。

只要确保用户输入了一个字符串。

【讨论】：

我试过了，但是当我使用它时，变成空白。