How to display an input's source in an iframe using jQuery?

Question

Good morning, I'm now a beginner in jQuery and I have a problem using iframes and inputs. Here's the situation : I have an input where I can enter (for example) a website, and display it on an iframe. I tried a lot but without a result. Here's my code. I'd appreciate your help guys, thanks a lot !

<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
    <input type="button" value="GO" onClick="getval()" />
    <input type="text" name="url" src="http://www.google.com" id="textframe">

    <iframe src="" id="targetframe"></iframe>

    <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        function getvalue() {
            var xframe = $("textframe").val();
            $("targetframe").attr('src', xframe);
        }
    </script>
</body>

Your function is getvalue but you're calling getVal on the button click. — Phiter
– Phiter, Commented Nov 7, 2016 at 9:59
You shouldn't fix your question's code, it may confuse future viewers. Check my answer and see if it helps. — Phiter
– Phiter, Commented Nov 7, 2016 at 10:14

Phiter · Accepted Answer · 2016-11-07 10:22:18Z

2

You were using a undefined function and you didn't put hash symbol on the jquery objects when querying for an id.

I fixed your snippet and it should work.

function getval() {
   var xframe = $("#textframe").val();
   $("#targetframe").attr('src', xframe);
}
$("#btnGo").click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="btnGo" value="GO" onClick="getval()" />
<input type="text" name="url" value="http://www.stackoverflow.com" id="textframe"> <br>
<iframe src="" id="targetframe"></iframe>

Remember that iframes needs http://in the url in order to work.

If you're on your website and you simply do www.google.com and your website is www.example.com, your iframe source will become www.example.com/www.google.com

edited Nov 7, 2016 at 10:22

answered Nov 7, 2016 at 10:05

Phiter

15k14 gold badges52 silver badges87 bronze badges

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

7 Comments

HamzaLamfaouar Over a year ago

Thank you Phiter for your remarks! However, I still have the same problem, nothing is displayed on the iframe!

Phiter Over a year ago

The problem is that iframes don't work on stackoverflow for the security problem.

HamzaLamfaouar Over a year ago

Yes it works! I really don't know where's the problem with mine!

HamzaLamfaouar Over a year ago

In fact, your snippet works here in stackoverflow, but, when I copied it and past it in my original code, it doesn't work !

Phiter Over a year ago

put your original code on pastebin and send it to me so I can check what's happening.

|

Collectives™ on Stack Overflow

How to display an input's source in an iframe using jQuery?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related