Question

I want to have a textbox in my HTML page, and also an iframe. When the user types in a URL in the textbox and clicks Submit, the iframe navigates to that page. When the user clicks a link within the iframe, the URL in the textbox also changes to the new URL. Is it possible?

NOTE: Solutions not using iframe are welcome, but they should achieve roughly the same functionality as iframe.

Answer 1

Give your text box a id for example “txtInput”
give your iframe a id for example “myIframe”
on the button give it no navigation so it stays on current page and use the onclick=”myFunction()”

in the function you can use this (excuse me if this is slightly wrong its been a while since I have used HTML

    function myFunction()
    {
        var iframe = document.getElementById("myIframe");
        var input = document.getElementById("txtInput").text;

//check to see if there is a valid url in the text box be carefull if there are multiple links in the text box it will put them all in and the iframe will go to 127.0.0.1 or search engine due to incorrect URL
        var isURL=new RegExp(/(((f|ht)(tp|tps):\/\/)[\w\d\S]+)/,g);

        iframe.src = input.match(isURL);
    }

If you do not want to mess with regular expresions you can just simply use the following.

function myFunction()
{
    var iframe = document.getElementById("myIframe");
    var input = document.getElementById("txtInput").text;

    iframe.src = isURL;
}