URL to iFrame

[helraizer1]

Hi all,

I have a site that I'm making for a project.

I have an Input field, a button and an iFrame.

What I would like to do is have the user type in a URL into the input field, press the button and then the browser shows the resulting webpage into the iFrame.

What Javascript would I need for this? Any ideas?

[pbmods]

Heya, Helraizer.

You'd access the text in the textbox like this:

var url = document.getElementById('idOfTextbox').value;
 

And to navigate in the iframe:

document.getElementById('idOfIframe').location.href = url;
 

[helraizer1]

Thank you! That worked. =)

Now the problem is validation. If the user types in www.bbc.co.uk - it won't work because there is no http:// so I added

 
        document.getElementById('myiFrame').src = "http://" + url;
 

Which then works if the only type in a www. address. If they do type in 'http://www.bbc.co.uk' then the resulting site is 'http://http://www.bbc.co.uk and thus does not work.

How would I impliment it so that if they only put 'www.bbc.co.uk' it adds the 'http://' infront but if they do add 'http://' then it doesn't.

Hope I made myself understandable there. Any ideas?

Thanks,

Sam

[pbmods]

Heya, Sam.

You'll want to use String::indexOf() for that:

if( url.indexOf('http://') != 0 )
{
 

Note that the code above checks to see if the result of url.indexOf() is not 0. String::indexOf() will return -1 if the search value is not found, but it is conceivable that the User might put in a badly-formed query string, so you want to make sure that the string doesn't start with 'http://'.

For example, suppose the User input something like this:

www.myphpproxy.tld/path/to/proxy.php?url=http://www.google.com/
 

There is a 'http://' in this string, but of course it's not a valid URL.