How do I load a URL specified in a textbox in an iframe?

Question

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;' />

and here is the iframe code:

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

score 0 · Answer 1 · answered Oct 16 '13 at 01:32

0

At its most basic...

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

answered Oct 16 '13 at 01:32

Daniel Williams

2,195
7
32
53

I cannot change this to anything but cnn.com though. This is supposed to be a browser emulator if that helps. This textbox is the address bar. – rn10950 Oct 16 '13 at 01:40
My code is a demonstration. Take the `value="http://www.cnn.com"` part out to let users enter their URL. As another post mentions, be aware that some sites won't respond well to being loaded ina frame. Google is a good example. – Daniel Williams Oct 17 '13 at 01:41

score 0 · Answer 2 · edited Oct 18 '13 at 07:08

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>

score 0 · Answer 3 · edited Mar 26 '21 at 19:43

i find that so far this one works better in my testing. I am currently making a site coverup for students (its a assignment iframe over the site they want to use iframe):

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

-but so far the only features i would add to it would be script to change the size of the textbox and so that when u click go the iframe is above the textbox.

-here is the link to the demo of sitecover https://retrowo1f.itch.io/coversite (no add graphics and bad layout Notice these are not bugs i will fix in the demo because that is why its the demo)

How do I load a URL specified in a textbox in an iframe?

3 Answers3

Linked