CODEWITHSUNDEEP
javascript
rerat
rerat

Reputation: 375

Javascript setTimeout not working right in iFrame

I have a web page that shows us some logs. When you click on a log, it dynamically generates an iFrame and the iFrame loads all our data. I used ajax on the iFrame page to keep the data current. Ajax is then ran using setTimeout. Here is the issue. If you type in just the URL for the iFrame, it updates every second like it should. But if you click on the log which uses javascript to create the iFrame, it runs ajax once and stops. Not sure what I am doing wrong, but it should be quite simple I would think.

//FIRST THE IFRAME IS CREATED
var ifrm = document.createElement('iframe');
ifrm.setAttribute('src', 'iframe.php?username='+user);
ifrm.style.width="100%";
ifrm.style.height="100%";
ifrm.frameBorder="0";
ifrm.setAttribute('id', 'settings');
div.appendChild(ifrm);


//THIS FUNCTION IS IN THE IFRAME
//I REPLACED THE AJAX CODE WITH AN ALERT FOR TESTING
(function timed() {
    alert("hi");
    setTimeout(timed, 1000);
}());


//NEW CODE IN PARENT, AT BOTTOM OF PAGE, AFTER IFRAME IS CREATED
//THE FUNCTION IN THE IFRAME IS NAMED UPDATE()
<script>
setTimeout(document.getElementById('settings').contentWindow.update(), 1000);
</script>

//IFRAME CODE
function update(){
    alert("hi");
}

Upvotes: 1

Views: 3330

Answers (2)

sbarnard
sbarnard

Reputation: 385

You should be able to call setTimeout in the parent, not the iframe, reference the function in the iframe as the target site: 

setTimeout(document.getElementById('frameId').contentWindow.timed(), 1000);

Here is a full example I tried on my local host:

main.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <iframe src = "frame.html" id="frame" name="frame"></iframe>
</body>
<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
        var frame = document.getElementById('frame');
        var updater = function(){       
            if(typeof(frame.contentWindow.self.update) == 'function'){
                frame.contentWindow.self.update();
            }
            setTimeout(updater, 5000);
        };

        updater();
    });
</script>
</html>

frame.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script>
        var test_counter = 0;

        var update = function(){
            console.log('updating');
            document.getElementById('testcount').innerHTML = test_counter;
            test_counter ++;
        }

        this.update = update;
    </script>

</head>
<body>
    <h1>I am an iframe<h1>
    <div>I have been updated <span id="testcount">0 </span> times.</div>
</body>
</html>

I should mention that this will only work if both the frame and the parent container are from the same origin.

Alternatively if the iframe initially displays up to date information on load you can just reload it on an arbitrary interval: 

document.getElementById('frame').contentWindow.location.reload();

(as mentioned in my earlier comment to your original post and by Bindrid)

Upvotes: 1

Bindrid
Bindrid

Reputation: 3735

Here is an alternate solution. If your page being loaded into the iframe is a simple log, not a complicated page, doing this after the log is loaded the first time. From your code, I see the iframe id is 'settings' so...

          interval = setInterval(function () {
            document.getElementById('settings').contentWindow.location.reload(true);
        }, 2000);

then you can use the interval object to clear when you want to stop reloading.

Upvotes: 0

Related Questions