Please take a look at the below code. The below code is small representation of a bigger system.
var parentNode = document.createElement("DIV");
var childNode = document.createElement('iframe');
childNode.src = "http://www.google.com";
parentNode = null;
childNode = null;
var allFrames = document.getElementsByTagName("iframe");
var pNode = allFrames.parentNode;
pNode.innerHTML = null;
pNode = null;
allFrames = null;
<input type='button' value='Create' onclick='create();' />
<input type='button' value='Destroy' onclick='destroy();' />
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.
Have you come across this article?
I'm not really familiar with the issue, but there seems to be a ton of articles including some workarounds on re-using the element instead of trying to delete it.
I can't think of a good way to reuse the nodes. Here are some of the reasons.
1) The menu on the left side itself is dynamic. Each user has his own custom menu.
2) The idea is to have tabs similar to browser tabs. A user must be able to open as many tabs as he wants and navigate between the various tabs.
So I can't predict the maximum number of tabs that will be opened. Even if I was to count the menu during runtime and decided to restrict the number of tabs, it will still be huge drain by the browser since the menu can contain hundreds nodes for single user.