如何在iframe中加载文本框中指定的网址？ [英] How do I load a URL specified in a textbox in an iframe?

问题描述

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

I am creating a fake browser shell using CSS/HTML and Javascript (Netscape 4.0) and I would like to know if it is possible to load a URL typed in a text box in an iframe. I found something online and it loads pages in the same directory but not external URLs. here is that section of the code:

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

，这里是iframe代码：

and here is the iframe code:

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

推荐答案

在回答您的问题之前，拒绝在iframe中加载网页（例如： http://google.com ），有些网站会强制加载页面在iframe外（例如： http://www.tumblr.com ）。是的，我知道，太烂了。

Before I answer your question, take note that some sites refuse to load the page inside an iframe (example: http://google.com) and some sites would force to load the page outside an iframe (example: http://www.tumblr.com). Yeah I know, it sucks.

好吧，这里是我解决你的问题：

Okay, so here's my take on solving your problem:

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

这篇关于如何在iframe中加载文本框中指定的网址？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！