Question

我希望能够拥有它，以便用户可以在表单输入中放置他们想要的任何网站，然后单击“提交”并将该网站加载到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，但如果是的话也没关系。

谢谢！

Answer 1

如果没有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>

Answer 2

我想说，使用仅限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>

Answer 3

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

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

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

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

Answer 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>

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

4 个答案: