使用JavaScript更改<iframe>

Use JavaScript to change source of <iframe>

本文关键字：iframe gt JavaScript lt 使用 更改      更新时间：2023-09-26

以下是代码：

<!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属性，它会重新加载。还有其他属性我应该使用吗？提前谢谢。

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

更新

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

编辑

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

  1. 向iframe添加一个name属性（我总是有相同的id和名称）
  2. 在锚点上，将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>

尝试这个

<!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，然后将页面重新加载到一个无休止的循环中。

<!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属性，然后将该属性更改为您设置的任何属性。

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

相关文章：