将 iframe src 更改为表单输入的结果答案

【问题标题】：Change iframe src to the result of a form input将 iframe src 更改为表单输入的结果
【发布时间】：2013-07-28 18:32:40
【问题描述】：

我希望能够拥有它，以便用户可以在表单输入中输入他们想要的任何网站并单击提交并将该网站加载到 iframe 中。

我的代码是：

<body>
<form method="post" target="browser">
<input style="width:82%;" placeholder="Put the website here" name="url" type="text" />
<input style="width:8%;" name="submit" type="button" value="Go" />
</form>
<iframe name="browser" src="http://google.com" style="height:100%; width:100%"></iframe>
</body>

有点像迷你浏览器，网站还有更多内容，除了玩笑之外不会用于实际目的，所以我不担心不良做法。

最好不要使用javascript，但如果是也可以。

谢谢！

【问题讨论】：

我在有以前的答案时回答了，因为：Pietu1998 的答案在没有修复的情况下将无法工作，Karthikeyan 的答案并不完整，而 faino 的答案对于这种简单的行为来说太复杂了，尤其是因为听起来你不知道不想过多地使用 javascript。

标签： html forms iframe

【解决方案1】：

有一种方法可以在特殊情况下不使用 javascript 来完成这项工作。例如，您的域名是不变的，并且您想更改查询参数，比如您想让 iram 在 bing.com 中搜索...

方法如下：

为您的 iframe 设置一个名称，如下所示：<iframe name="myiframe" src="--a default source--">
将表单操作和方法以及目标设置为 ifra：<form action="https://www.bing.com/search" method="GET" target="myiframe">
将这两个输入放在以下表格中：

      <input type="text" name="q" id="" />
      <input type="submit" value="search" />

现在，如果您点击提交按钮，https://www.bing.com/search?q=val 将被设置为 iframe 中的 src。

【讨论】：

【解决方案2】：

如果没有 JavaScript，这应该是不可能的，但这里有一种方法：

<input style="width:82%;" placeholder="Put the website here" name="url" id="url" type="text" />
<input style="width:8%;" name="submit" type="button" value="Go" onclick="document.getElementById('browser').src = document.getElementById('url').value;" />
<iframe name="browser" id="browser" src="http://google.com" style="height:100%; width:100%"></iframe>

您甚至不需要表单，因为我们不会向服务器发送任何内容。另请注意，我为元素添加了 ID 值。您也可以将<input type="button"> 更改为<button> 标签：

<button style="width:8%;" name="submit" onclick="document.getElementById('browser').location = document.getElementById('url').value;">Go</button>

【讨论】：

最好让脚本远离 UI 标签。可能您只是为了教育目的而添加的。
@Karthikeyan OP 说“这不会用于开玩笑以外的实际目的，所以我不担心不良做法。”所以我认为不开始创建<script> 标签和onloads 会更容易。
@Pietu1998：您的代码中可能存在错误。查看this edit suggestion。
@NisseEngström 显然。修复。（不确定它是否在 2013 年有效，现在 iframe.contentWindow.location 也可以）

【解决方案3】：

我会说使用纯 javascript 解决方案在这里是最简单的。单击按钮时，我稍微更改了您的 HTML 以调用 javascript 函数。

<form method="post" target="browser">
<input id="txtUrl" style="width:82%;" placeholder="Put the website here" name="url" type="text" />
<input style="width:8%;" type="button" value="Go" onclick="setBrowserFrameSource(); return false;"/>
</form>
<iframe id="browser" name="browser" src="http://google.com" style="height:100%; width:100%"></iframe>

这个简单的函数会改变你的 iframe 的来源：

<head>
<script type="text/javascript">
    function setBrowserFrameSource(){
        var browserFrame = document.getElementById("browser");
        browserFrame.src= document.getElementById("txtUrl").value;
    }
</script>
</head>

【讨论】：

您可以轻松添加该功能
是的，只有一个问题。这不适用于我域之外的网站吗？当我尝试使用它时，iframe 是空白的。我右键单击它并查看框架源，它显示“view-source:data:”，知道会发生什么吗？
如果您可以查看，请点击这里的链接：openweb.gdn/iframe.html

【解决方案4】：

这是处理您的问题的一种不显眼的方法；在现代浏览器中运行良好（如果您想支持旧版本的 IE，请查看readystatechange）：

<!DOCTYPE html>
<html>
    <head>
        <title>IFRAME Script</title>
        <script>
            (function(d){
                var init = function(){
                    var form = d.getElementById("my_form"), input = d.getElementById("url"), iframe = d.getElementById("browser");
                    form.addEventListener("submit", function(e){
                        var val = input.value;
                        if(val) {
                            iframe.src = val;
                            console.log(val);
                        }
                        e.preventDefault();
                    }, false);
                };
                d.addEventListener("DOMContentLoaded", init, false);
            })(document);
        </script>
    </head>
    <body>
        <form method="post" target="browser" id="my_form">
            <input style="width:82%;" placeholder="Put the website here" name="url" id="url" type="text" />
            <input style="width:8%;" name="submit" type="button" value="Go" />
        </form>
        <iframe name="browser" id="browser" src="http://google.com" style="height:100%; width:100%"></iframe>
    </body>
</html>

【讨论】：

【解决方案5】：

希望你想这样做，完全在客户端。

没有 Javascript，您无法实现这一点，因为它本质上是动态的。

首先，为您的 iframe 创建一个 id，然后在点击处理程序中添加这样的脚本，

document.getElementById('iframeid').src = 'pageurl';

【讨论】：

getElementById('iframeid') 不是getElementById['iframeid']