0

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?

IceRegent
  • 17
  • 1
  • 1
  • 7
  • Possible duplicate of [Changing iframe src with Javascript](http://stackoverflow.com/questions/3730159/changing-iframe-src-with-javascript) – Luke Apr 24 '17 at 01:00
  • Could post your form to the iframe as target...validate url at server and redirect there if it is valid url. Note that not all sites will work in iframe if they have frame busting headers – charlietfl Apr 24 '17 at 01:02
  • Not duplicate. Every single post I have read, deals with static set url values when an on-click is performed. What I need to do, is set the new url to what the user has input. – IceRegent Apr 24 '17 at 01:11
  • Yeah, on re-reading, I noticed there's something else going on. I've removed my suggestion. – Luke Apr 24 '17 at 01:14

2 Answers2

1

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.

Luke
  • 640
  • 3
  • 10
  • Thank you Luke, I will try this momentarily. Yes, there is much more going on with this, but if this works, i will use it for my main page work. – IceRegent Apr 24 '17 at 01:21
  • Ok, I have tried it, and it does not work. Here is the actual url where it is: https://www.hypnomindcontrol.net/testing/mytest.html – IceRegent Apr 24 '17 at 01:47
  • OK. The only errors I'm getting are security errors. Because you are serving from HTTPS, the iframe won't show anything from an non-secure location. – Luke Apr 24 '17 at 01:59
  • If you try something like `https://www.xkcd.com` in the text box it should work because it is served over `https`. If you use the normal `http://` protocol it will not load. – Luke Apr 24 '17 at 02:03
  • You could force the script to prepend `https://` (and remove `http://` if it exists), but there are sites that still won't serve over an iFrame and some that don't have `https` enabled anyway. – Luke Apr 24 '17 at 02:06
  • @IceRegent I've updated the script to make the changes – Luke Apr 24 '17 at 02:12
0

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.

SeekLoad
  • 973
  • 1
  • 9
  • 33