如何使用Javascript或jQuery动态更新iframe

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?

Answer 1

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? .

Answer 2

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>