2

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

谢谢！

4

5 回答 5

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>
于 2013-07-29T04:39:33.200 回答
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>
于 2013-07-29T04:53:34.353 回答
0

这是处理您的问题的一种不显眼的方法；在现代浏览器中运行良好（如果您想支持旧版本的 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>
于 2013-07-29T04:55:48.067 回答
0

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

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

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

document.getElementById('iframeid').src = 'pageurl';
于 2013-07-29T04:35:20.433 回答
0

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

方法如下：

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

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

于 2021-11-06T19:21:24.117 回答