我需要使用用户的输入动态更新iframe

I have been searching for the right information for days and weeks now, and I must just be missing it. I have a simple problem, so it would seem. I have an iframe, which loads with a default URL. I also have a text box, and a submit button. What I want to do now, is to let the user input a URL, and then have the URL displayed in the iframe. Please don't suggest I simply do other things, or ask why I want to do this. It is a ongoing learning process.

I have a java-script function that works when I use the "onclick" function. Here is the java-script:

<script>
function setURL(url){
    document.getElementById('myframe').src = url;
}

This works with a set url function such as this:

<input type="button" id="mybutton" value="Home Page" onclick="setURL('includes/guests.php')" />

The function works in that kind of scenario just fine. But, I want to instead, replace "onclick="setURL('includes/guests.php')" with the url entered by the user in this line:

<input type="text" name="sendurl" size="100">

I am unsure exactly how to get this to work right. I want the iframe to be loaded with the url the user inputs. If i use a standard submit, and submit the form to itself, the post info for the url can be checked, and i even verified it works.

if($_POST['sendurl'] != null) {
$tisturl = $_POST['sendurl'];
}
echo $tisturl;

echo $tisturl is simply to show me that it is carrying the url over correctly.

My problem is, how do I now dynamically update the iframe to the new url value?

</div>

Here is working code for something that will take what is typed by the user into a text box and use that as the src for the iFrame. Check your console to see if there are further errors (like Mixed Content security warnings, etc.).

<script>
function myFunction() {
    url = document.getElementById('newURL').value;
    url = url.replace(/^http:\/\//, '');
    url = url.replace(/^https:\/\//, '');
    url = "https://" + url;
    document.getElementById('myframe').src = url;
};
</script>
<input type="button" id="mybutton" value="Home Page" onclick="myFunction()" />
<input type="text" id="newURL" />
<iframe id="myframe" src="">

</iframe>

I've updated the script to remove http:// and https://prefixes before prepending https:// to ensure it tries to fetch secure resources.

This will work. It will show the loaded URL of the iframe n the text box and it will load the URL typed in the text box to the iframe using the button in the page or the enter key on your computer.

NOTE: You do not need to have a URL, you can have anything you want, this is just an example.

JavaScript

<script language="JavaScript">
function handleKeyPress(e)
{
    var key=e.keyCode || e.which;
    if (key==13){
    event.preventDefault();
    GoToURL();
    }
     return false;
}

function GoToURL()
{
    var URLis;
    URLis = document.URLframe.u.value
    test1 = document.URLframe.u1.value
    test2 = document.URLframe.u2.value
// just add more of these above the more text boxes you want to use for it, or you can just have one.
    {
        var location= ("http://" + URLis + test1 + "anything_you_want" + test2 + ".com"); // delete or add the name of the text boxes of above.
        window.open(location, 'iframefr');
    }
}
</script>

Boby HTML

<form name="URLframe" id="URLframe" method="post">

<iframe name="iframefr" id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>


<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<br>
<input type="text" name="u1" size="71" value="" placeholder=" U1 " onkeypress="handleKeyPress(event)">
<br>
<input type="text" name="u2" size="71" value="" placeholder=" U2 " onkeypress="handleKeyPress(event)">

<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">


<script type="text/javascript">
function loadurl() {
  document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>

</form>

NOTE: It is important that the function loadurl() is last in the <form>code and not in the head code as the rest of the javascript.