CODEWITHSUNDEEP
htmliframe
Jamsandwich
Jamsandwich

Reputation: 634

Remember Iframe Upon page refresh

I have a webpage set up with an Iframe. I also have 4 buttons set below the Iframe which will cause it to display a a specific page depending on which button is pressed.

Simple stuff.

My problem is that I need the page to auto-refresh every 5 minutes. This resets the Iframe. Is it possible to force the Iframe to stay where it is while the rest of the page refreshes around it? Or can I cause the Iframe to 'remember' where it was for the refresh?

HTML for reference -

<iframe src="Kine-Yield-Data/KG4x10.htm" name="iframe_a" frameborder="0" width="100%" height="100"></iframe>
<br>

<a href="Kine-Yield-Data/KG4x10.htm" target="iframe_a" class="button">10</a>
&nbsp;
<a href="Kine-Yield-Data/KG4x25.htm" target="iframe_a" class="button">25</a>
&nbsp;
<a href="Kine-Yield-Data/KG4x30.htm" target="iframe_a" class="button">30</a>
&nbsp;
<a href="Kine-Yield-Data/KG4x50.htm" target="iframe_a" class="button">50</a>

I styled the links as buttons.

Upvotes: 1

Views: 2164

Answers (1)

Rodrigo Leite
Rodrigo Leite

Reputation: 874

Well, you can do this using javascript.

When you hold the click event, you can save the frame path and add this value to your URL when you "refresh", then, you pick this value and set again on your iframe. I made a script for that, take a look:

var currentFramePath = '';
var iframe = '<iframe src="{src}" name="iframe_a" id="iframe_a "frameborder="0" width="100%" height="100"></iframe>';

            $(document).ready(function(){

                var urlFrame = getUrlParameter('currentFrame');

                if(urlFrame != null && urlFrame != ''){
                    $('#iframeContainer').html(iframe.replace('{src}', urlFrame));
                    currentFramePath = urlFrame;
                }

                $('.button').click(function(){
                    currentFramePath = $(this).attr('href');
                });

                setInterval(function(){
                    window.location = window.location.href.split('?')[0] + '?currentFrame=' + currentFramePath;
                }, 5000);

            });

            function getUrlParameter(sParam) {
                var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                    sURLVariables = sPageURL.split('&'),
                    sParameterName,
                    i;

                for (i = 0; i < sURLVariables.length; i++) {
                    sParameterName = sURLVariables[i].split('=');

                    if (sParameterName[0] === sParam) {
                        return sParameterName[1] === undefined ? true : sParameterName[1];
                    }
                }
            };

HTML:

<div id='iframeContainer'>
        <iframe src="Kine-Yield-Data/KG4x10.htm" name="iframe_a" id="iframe_a "frameborder="0" width="100%" height="100"></iframe>
    </div>
<br>

<a href="Kine-Yield-Data/KG4x10.htm" target="iframe_a" class="button">10</a>
&nbsp;
<a href="Kine-Yield-Data/KG4x25.htm" target="iframe_a" class="button">25</a>
&nbsp;
<a href="Kine-Yield-Data/KG4x30.htm" target="iframe_a" class="button">30</a>
&nbsp;
<a href="Kine-Yield-Data/KG4x50.htm" target="iframe_a" class="button">50</a>

Edit:

Google Chrome doesn't allow you to change the iframe src attribute, so, a way that I found to do that, was to recreate the element with the new SRC value.

I hope it helps you.

Upvotes: 2

Related Questions