使用 http 从表单输入中输入多个 iFrame 源答案

【问题标题】：Input multiple iFrame Source from Form Input with http使用 http 从表单输入中输入多个 iFrame 源
【发布时间】：2013-06-25 04:28:56
【问题描述】：

我在这里找到了以下代码。如果我输入http://google.com

它将 google.com 加载到 iframe 中。

我的问题是，

如何填充超过 1 个 iframe
我可以拥有它，这样我就不必输入 http:// 只是域 google.com

谢谢，代码如下：

<html>
   <head>
      <title>Blah</title>
          <link href="style.css" rel="stylesheet" type="text/css"/>

             <script type="text/javascript">

               function SetSrc()
               {
                   document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
               }

            </script>
   </head>
<body>

<form>
     Enter URL:
     <input type="text" id="txtSRC" />
     <input type="button" value="GO" onclick="SetSrc()" />
</form>

     <iframe id="myIfreme" src="" frameborder="0" marginwidth="0" height="500" width="480">   
     </iframe>

     <iframe id="myIfreme" src="" frameborder="0" marginwidth="0" height="500" width="840"> 
     </iframe>

</body>
</html>

非常感谢。这正是我一直在寻找的！到这里就完成了：

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Blah</title>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme1").src = 'http://' +   
document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = 'http://' + 
document.getElementById("txtSRC").value;
document.getElementById("myIfreme3").src = 'http://' + 
document.getElementById("txtSRC").value;
document.getElementById("myIfreme4").src = 'http://' + 
document.getElementById("txtSRC").value;
document.getElementById("myIfreme5").src = 'http://' + 
document.getElementById("txtSRC").value;
document.getElementById("myIfreme6").src = 'http://' + 
document.getElementById("txtSRC").value;

}
</script>
</head>
<body>
<form>
Enter URL:  http://
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<div style="clear:both">320 width</div>
<iframe id="myIfreme1" src="" frameborder="0" marginwidth="0" height="480" width="320" 
scrolling="yes"></iframe>
<div style="clear:both">480 width</div>
<iframe id="myIfreme2" src="" frameborder="0" marginwidth="0" height="480" width="480" 
scrolling="yes"></iframe>
<div style="clear:both">640 width</div>
<iframe id="myIfreme3" src="" frameborder="0" marginwidth="0" height="480" width="640" 
scrolling="yes"></iframe>
<div style="clear:both">800 width</div>
<iframe id="myIfreme4" src="" frameborder="0" marginwidth="0" height="480" width="800" 
scrolling="yes"></iframe>
<div style="clear:both">1024 width</div>
<iframe id="myIfreme5" src="" frameborder="0" marginwidth="0" height="480" width="1024" 
scrolling="yes"></iframe>
<div style="clear:both">1280 width</div>
<iframe id="myIfreme6" src="" frameborder="0" marginwidth="0" height="480" width="1280"     
scrolling="yes"></iframe>

</body>
</html>

感谢 alfasin - 你太棒了！

【问题讨论】：

标签： forms iframe

【解决方案1】：

试试：

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Blah</title>
<script type="text/javascript">
 function SetSrc()
 {
     document.getElementById("myIfreme1").src = document.getElementById("txtSRC").value;
     document.getElementById("myIfreme2").src = document.getElementById("txtSRC").value;
 }
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme1" src="" frameborder="0" marginwidth="0" height="500" width="480">
</iframe>
<iframe id="myIfreme2" src="" frameborder="0" marginwidth="0" height="500" width="840">
</iframe>

</body>
</html>

如果您不希望用户输入http://，您可以这样做：

...
<form>
Enter URL:  http://
<input type="text" id="txtSRC" />
...

和

function SetSrc()
{
    document.getElementById("myIfreme1").src = 'http://' + document.getElementById("txtSRC").value;
    document.getElementById("myIfreme2").src = 'http://' + document.getElementById("txtSRC").value;
}

顺便说一句，Google 会阻止您在 iframe 中使用 www.google.com。

【讨论】：

谢谢。这适用于多个 iframe，你知道我可以不必在域前输入 http://。 -- 有趣 -- 我不知道谷歌这样做了。
@user2518599 请查看我回答的最后一部分。
不客气！如果您勾选答案（左上角），则表示该答案已被接受。
谢谢。我刚刚检查过了。我是stackoverflow的菜鸟。我刚刚添加了另一个问题，如果您想查看它，我将如何添加 onkeypress, enter 按钮来提交表单。上面的代码相同。