How to display user input in iframe

Question

I have an input box for user to enter any url. Then I would like to display the website in a iframe after they click submit.

<html>
    <head>
        <title></title>
        <style>
            #netframe {
                float:right; 
                height: 100%; 
                width: 80%;
            }

            #sidebar {
                float:left; 
                height: 100%; 
                width: 20%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                Enter A URL:
                <input type="text" name="url" id="url">
                <input type="button" value="load" id="load">
                <br><br>    
            </div>
            <div id="netframe">
                <iframe height="100%" width="100%" class="netframe" src="pullsite.php" id="main_frame"></iframe>
            </div>
        </div>
    </body>
</html>

This is the closest I found online but it does not do anything: How To Reload A iframe Using jQuery

Hi mate and welcome to Stackoverflow! Could you show some code? — Littm
– Littm, Commented Sep 25, 2012 at 0:40

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

jsBin demo

HTML:

<input type="text" id="url" name="url" value="http://" /> 
<iframe height="90%" width="100%" src="" id="frame"></iframe>

jQuery

$('input#url').on('input', function() {
  $('#frame').attr('src', this.value);
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 25, 2012 at 0:44

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jared Farrish Over a year ago

In Firefox and Chrome, nothing displays; Chrome console gives: Refused to display document because display forbidden by X-Frame-Options. Which was my initial thought (security policy would block it).

Roko C. Buljan Over a year ago

@JaredFarrish I don't understand your concern: jsfiddle.net/pbUEc/1 Tested in Chrome and FireIEfox ;)

Jared Farrish Over a year ago

Nevermind; I was using http://www.google.com and was getting a x-xss-protection 1 mode=block header. Yes, it works with http://cnn.com.

Littm · Accepted Answer · 2012-09-26 00:56:26Z

0

Try to add the following JS / jQuery script to your code:

<script>
    $(function() {
        $("#load").click(function() {
            var new_url = $("#url").val();

            // Checks that the user typed "http://" or not
            if(new_url.substr(0,7)!="http://")
                new_url = "http://"+new_url;

            $("#main_frame").attr("src", new_url);
        });
     });
</script>

So, your code will look like something like this:

<html>
    <head>
        <title></title>
        <script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <style>
            #netframe {
                float:right; 
                height: 100%; 
                width: 80%;
            }

            #sidebar {
                float:left; 
                height: 100%; 
                width: 20%;
            }
        </style>
        <script>
            $(function() {
                $("#load").click(function() {
                    var new_url = $("#url").val();

                    // Checks that the user typed "http://" or not
                    if(new_url.substr(0,7)!="http://")
                        new_url = "http://"+new_url;

                    $("#main_frame").attr("src", new_url);
                });
             });
        </script>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                Enter A URL:
                <input type="text" name="url" id="url">
                <input type="button" value="load" id="load">
                <br><br>    
            </div>
            <div id="netframe">
                <iframe height="100%" width="100%" class="netframe" src="pullsite.php" id="main_frame"></iframe>
            </div>
        </div>
    </body>
</html>

PS: Don't forget to load the jQuery library. You can load it from the web for example, by adding the following in your header:

<script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Hope this helps. Let me know if this works for you mate.

edited Sep 26, 2012 at 0:56

answered Sep 25, 2012 at 1:34

Littm

4,9454 gold badges33 silver badges40 bronze badges

3 Comments

user1695883 Over a year ago

This one pull a webpage on my server. So if I type google.com and click load it will open: mywebsite.com/google.com. Do I need to change something. maybe in pullsite.php

Littm Over a year ago

My code works only if you type the entire url. For example, if you type http://jquery.com, it will work. I'll modify a bit my code so that you won't have to type the url entirely ;). Wait a sec please...

Littm Over a year ago

Ok mate, I modified the code a bit. You may try, I think that's ok now ;). PS: I'm not sure that websites like google.com will work (I think they have security stuffs I think... :S), but you can try it with jquery.com for example :)

Collectives™ on Stack Overflow

How to display user input in iframe

2 Answers 2

jsBin demo

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related