Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with interval

Status
Not open for further replies.
Atvr1d3r

Atvr1d3r

Programmer
Nov 19, 2008
10
US
Hi. I have a tabular page that loads a series of pages into multiple iframes based on a menu selection. For example the user selects a page they want to view from a menu and a new tab is created with an Iframe and the page is loaded into the Iframe.

One of the pages contains a timer that I set using setinterval. The problem is that even after I remove the tab and iframe with javascript the timer still elapses.

I have tried page events like onunload and ondisposed but that does'nt seem to work. I would use clearinterval but I cant get an event to fire when the iframe is removed.
 
Sort by date Sort by votes
Hi

If you are removing the [tt]iframe[/tt] with your script, then why listening to an event ? Just do the [tt]clearInterval()[/tt] before removing the [tt]iframe[/tt].

Feherke.
 
Upvote 0 Downvote
Because the interval is inside the page that I'm loading into the iframe. So I can't do clearinterval() because the interval does'nt exist in the page with the iframe.
 
Upvote 0 Downvote
Hi

I supposed that both the inner and outer documents are loaded from the same domain. In which case this will work :
Code: 
<html>
<head>
<script type="text/javascript">
var i
function iframe()
{
  if (i) {
    i.contentWindow.clearInterval(i.contentWindow.t)
    document.body.removeChild(i)
    i=null
  } else {
    i=document.createElement('iframe')
    document.body.appendChild(i)
    i.src='outer.htm'
    i.contentWindow.t=i.contentWindow.setInterval('tick()',1000)
  }
}
</script>
</head>
<body>
<a href="#" onclick="iframe();return false">iframe</a>
</body>
</html>
Code: 
<html>
<head>
<script type="text/javascript">
function tick()
{
  document.getElementsByTagName('h1')[0].innerHTML=new Date()
}
</script>
</head>
<body>
<h1>iframe</h1>
</body>
</html>
But anyway, to me this also works fine :
Code: 
<html>
<head>
<script type="text/javascript">
var i
function iframe()
{
  if (i) {
    document.body.removeChild(i)
    i=null
  } else {
    i=document.createElement('iframe')
    document.body.appendChild(i)
    i.src='outer.htm'
  }
}
</script>
</head>
<body>
<a href="#" onclick="iframe();return false">iframe</a>
</body>
</html>
Code: 
<html>
<head>
<script type="text/javascript">
var t
function tick()
{
  document.getElementsByTagName('h1')[0].innerHTML=new Date()
}
window.onload=function() {
  t=setInterval('tick()',1000)
}
window.onunload=function() {
  clearInterval(t)
}
</script>
</head>
<body>
<h1>iframe</h1>
</body>
</html>
Can you show us your code ?

Feherke.
 
Upvote 0 Downvote
This is how I'm creating the Iframe.


var swindow = document.createElement("div"); //---------- window -------
$(swindow).id="window_"+tabs_counter;
$(swindow).windowIndex= tabs_counter;
$(swindow).className="tabs_window";
$(swindow).url=url; //revise


$("layout_iframe-container").appendChild(swindow);

iframe= document.createElement("iframe"); // ------ iframe (inside window) --------------
$(iframe).id="iframe_"+tabs_counter;
$(iframe).frameBorder="0";
$(iframe).className = "tabs_iframe";
$(iframe).setStyle("z-index","0");
$(iframe).src=url;

$(swindow).appendChild(iframe);


This is the code within the page that I'm loading into the Iframe that contains the interval


function StartFurnaceMapRefresh()
{
FurnaceMapRefreshId = setInterval (FurnaceMapRefeshTimer,20000);
}

function StopFurnaceMapRefresh()
{
clearInterv(FurnaceMapRefreshId);
FurnaceMapRefreshId = null;
}

function FurnaceMapRefeshTimer()
{
if(FurnaceMapTimerEnabled == true)
{
alert('Updated'); //Temp
var vBilletContainer = document.getElementById('bltContainer');
var vChCont = document.getElementById('ChargePositionContainer');
var vDchCont = document.getElementById('DischargePositionContainer');
ClearBilletContainer(vBilletContainer);
ClearChargeContainer();
ClearDischargeContainer();
CreateRuleLines(vBilletContainer);
CreateRuleLines(vChCont);
CreateRuleLines(vDchCont);
SetJsonData();
}
}


The trouble is I need to make the interval clear when the iframe is removed. I can't modify the creation of the iframe code in any way. It is a standard company framework that I cannot change. All I can do is create the pages that go into this iframes.
 
Upvote 0 Downvote
I realized that clearInterv(FurnaceMapRefreshId); is the wrong syntax in the code that I sent you but it is just a type when I sent you the code

it is clearInterval(FurnaceMapRefreshId);
 
Upvote 0 Downvote
StartFurnaceMapRefresh() is getting called when the page getting loaded into the iframe is loaded.

I just found the source of the problem. But I still don't know how to fix it yet.

The source of the problem is even though I'm creating the interval inside the page being loaded into the iframe. The interval is somehow getting associated with the parent page.

Then when I delete the iframe from the parent page the page inside the iframes onunload event is never getting hit and the interval is never getting cleared.

I'm still trying to find a solution


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
132
amrmnabil
amrmnabil
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
104
ggriffit
ggriffit
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
91
bs6600
bs6600
Disskyz
  • Locked
  • Question
New to JavaScript, Having a problem with an array
Replies
2
Views
137
Disskyz
Disskyz
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
74
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top