Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Refresh IFrame without page refresh

    Hi All,

    I want to refresh to the contents of an IFrame without refreshing the whole page...How is this possible

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    235
    Thanks
    6
    Thanked 21 Times in 20 Posts
    Google gave me this:

    Code:
     <script type="text/javascript">
      function go()
        {
          document.main.submit();
                }
         function reload()
    {
          document.getElementById("Frame3").src=document.getElementById("Frame3").src;
    }        
    </script>
    
    <body>
    <form name="main" action="" method="post" target="county">
    <select name="state" size=1 onClick="reload();"><option value=1>a</option><option value=1>b</option></select>
    
    <iframe id="Frame3" src="Todo.htm"  name="city" width="700" height="200" frameborder="1"></iframe>
    </body>
    Andrew Sharman
    Web designer, developer and programmer.

    If you found my post helpful, why not give thanks! :)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks udjamaflip for your reply.....
    But when i click on Drop Down not only IFrame but the page also get refreshes....
    Can you please come up with a new solution

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Posts
    235
    Thanks
    6
    Thanked 21 Times in 20 Posts
    Like I said, it came from Google. I've given you something to start with, now how about you try yourself.

    I have seen no sign of you trying yourself, which is why no-one else has responded.
    Andrew Sharman
    Web designer, developer and programmer.

    If you found my post helpful, why not give thanks! :)

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry udjamaflip but i have been trying many different techniques from googling and searching through different forums but all of them refresh the whole page despite just refreshing the IFrame

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm not sure how you could have searched google results and still missed a solution, but here's another result. Let me know if this doesn't work:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
    <head>
    <title>Javascript IFrame Reload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript"><!--
    // set your interval in milliseconds
    var reloadInterval = 3000;
    // this will run when the document is fully loaded
    function init() {
     setTimeout('reload()',reloadInterval);
    }
    // this reloads the iframe, and triggers the next reload interval
    function reload() {
     var iframe = document.getElementById('reloader');
     if (!iframe) return false;
     iframe.src = iframe.src;
     setTimeout('reload()',reloadInterval);
    }
    // load the init() function when the page is fully loaded
    window.onload = init;
    --></script>
    </head>
    <body>
    <iframe id="reloader" width="500" height="400" src="http://www.google.com/"/>
    </body>
    </html>
    This actually reloads an iframe every 3 seconds, but it can be easily tailored to your needs for a 1-time reload since the basic principals apply...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •