Hi,
Please take a look at the below code. The below code is small representation of a bigger system.
<html>
<head>
<style type="text/css">
</style>
<script language='Javascript'>
function create()
{
var parentNode = document.createElement("DIV");
var childNode = document.createElement('iframe');
childNode.src = "http://www.google.com";
parentNode.appendChild(childNode);
document.getElementById('test').appendChild(parentNode);
parentNode = null;
childNode = null;
}
function destroy()
{
var allFrames = document.getElementsByTagName("iframe");
var pNode = allFrames[0].parentNode;
pNode.innerHTML = null;
pNode.parentNode.removeChild(pNode);
pNode = null;
allFrames = null;
}
</script>
</head>
<body>
<input type='button' value='Create' onclick='create();' />
<input type='button' value='Destroy' onclick='destroy();' />
<div id='test'></div>
</body>
</html>
We have an enterprise application in which I am using iframes to creates dynamic tabs within the same webpage. So we have a main application which has a menu on the left and clicking on the nodes of this menu will open new web applications as tabs on right side.
However the problem is that once the tabs/iframes are removed the browser does not release the memory. This happens both in IE8 and FireFox. So over a period of time the memory consumed by the browsers are huge because of the creation and deletion of new tabs/iframes and the application slows down.
Is there a way to make the browser release memory when an iframe is removed.
Thanks