Question

以下是代码：

＆＃xA;＆＃xA;

 ＆lt;！DOCTYPE html＆gt;＆＃xA; ＆LT; HTML＆GT;＆＃XA; ＆LT; HEAD＆GT;＆＃XA; ＆LT;脚本＆GT;＆＃XA; var URL = prompt（“在此处插入URL”，“http://www.example.com”）; //向用户询问URL＆＃xA; ＆LT; /脚本＆GT;＆＃XA; ＆LT; /头＆GT;＆＃XA; ＆LT;身体GT;＆＃XA; ＆lt; iframe onload =“this.src = URL”height =“610px”width =“1320”id =“window”＆gt;＆lt; / iframe＆gt;＆＃xA; ＆lt; / body＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA;

＆＃xA;＆＃xA;

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

＆＃xA;

Answer 1

试试这个

<!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加载时（而不是加载页面窗口时）会触发iframe上的onload属性，因此它再次设置src，然后将页面重新加载到无限循环中。

Answer 2

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

请确保用户输入字符串。

Answer 3

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

<强>更新

自SO沙箱iframe以来添加了 PLUNKER 。

修改

我添加了另一种操作你可能感兴趣的iframe的方法。它只涉及HTML，没有JS。请注意{example}的anchor。基本上你需要做的就是：

向iframe添加name属性（我的ID始终为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>

使用JavaScript更改<iframe>的来源

3 个答案: