Question

我正在使用CSS / HTML和Javascript（Netscape 4.0）创建一个假的浏览器shell，我想知道是否可以加载在iframe的文本框中键入的URL。我在网上找到了一些东西，它将页面加载到同一目录中，但不加载外部URL。这是代码的那一部分：

<input type="submit" name="submit" id="submit" value="Go" onclick='document.getElementById("theframe").src=document.getElementById("url").value; return false;' />

以下是iframe代码：

<iframe frameborder="0" class="iframe" id='theframe' style="width:100%; height:100%;" scrolling="yes"></iframe>

Answer 1

最基本......

<script type="text/javascript">
function loadUrl() {
    document.getElementById("urlDisplay").src = document.getElementById("urlSource").value;
}
</script>

<p><input type="text" id="urlSource" value="http://www.cnn.com"> <input type="button" value="Go" onclick="loadUrl()">

<p><iframe id="urlDisplay" width="200" height="200">

Answer 2

在我回答您的问题之前，请注意某些网站拒绝在iframe中加载该网页（例如：http://google.com），而某些网站会强制将网页加载到iframe之外（例如：{{3} }）。是的，我知道，很糟糕。

好的，这就是我解决问题的方法：

<form action="" method="post" id="url-setter">
    <input type="text" name="url" id="url" />
    <button type="submit" name="submit">Change URL</button>
</form>
<iframe id="the-frame" width="640" height="480" src=""></iframe>
<script type="text/javascript">
    (function () {
        "use strict";
        var url_setter = document.getElementById('url-setter'), url = document.getElementById('url'), the_iframe = document.getElementById('the-frame');
        url_setter.onsubmit = function (event) {
            event.preventDefault();
            the_iframe.src = url.value;
        };
    }());
</script>

Answer 3

我发现到目前为止，这个在我的测试中效果更好。我目前正在为学生制作网站封面（这是他们想要使用 iframe 的网站上的分配 iframe）：

<script type="text/javascript">
function loadUrl() {
    document.getElementById("urlDisplay").src = document.getElementById("urlSource").value;
}
</script>

-但到目前为止，我要添加的唯一功能是更改文本框大小的脚本，以便当您单击 go 时，iframe 位于文本框上方。

-这里是 sitecover https://retrowo1f.itch.io/coversite 演示的链接（没有添加图形和错误的布局注意这些不是我将在演示中修复的错误，因为这就是演示的原因）

如何加载iframe中文本框中指定的URL？

3 个答案: