How do I dynamically update an iframe using Javascript or jQuery

Question

I am developing a page in with a text box, a submit button, and an iframe.

The URL should be put in the text box. Upon hitting the button, the result should appear in the iframe.

How do I do this?

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

You should not need JavaScript at all. Set the target attribute of your form to the name of the frame, and it will load there.

See also the duplicate How do you post to an iframe?.

edited May 23 '17 at 12:27

Community

1
1

answered Feb 23 '12 at 22:22

Bergi

513,640
108
821
1,164

score 0 · Answer 2 · answered Feb 23 '12 at 22:33

0

Here is a quick solution for now using js

 <form target="#" name="iframeform" action="post">

     <input type="text" value="http://" name="framefood" id="framefood" /><br />
     <button id="feedframe" onclick="completeFrame(); return false;">Send</button><br /><br />
     <iframe id="feedme" width="600" height="400"></iframe>
 </form>
 <script>

     var completeFrame = function(e){
         var feidlId = document.getElementById("framefood");
         var frameSrc    =   feidlId.value;
         var frameId = document.getElementById("feedme");
         frameId.src =   frameSrc;
     }

 </script>

answered Feb 23 '12 at 22:33

Simon Davies

3,574
8
37
67

,, in the text box i typed google.com but it dosent come in the iframe, y is dat so? – TarunKumar Feb 27 '12 at 21:47
you might need to check that the url being entered has the http:// etc as it will not work properly? – Simon Davies Feb 28 '12 at 13:11
i did enter the url along with the "http://",but it gives me an error saying "this webpage is not found" – TarunKumar Mar 03 '12 at 16:46
then its seems the site its looking for is an issue, if it displayed this message within the iframe? – Simon Davies Mar 04 '12 at 18:50

How do I dynamically update an iframe using Javascript or jQuery

2 Answers2