避免内存泄漏将内容加载到iframe中 [英] Avoiding memory leaks loading content into an iframe

问题描述

我正在开发一个在iframe中呈现内容的嵌入式系统。它使用signalR（基于ajax）和jquery。随着时间的推移，浏览器变得越来越慢，内存使用量也越来越高。所以我希望删除所有潜在的内存问题。

I am working on an embedded system that presents content in an iframe. It uses signalR (which is based on ajax) and jquery. The browser gets slower and slower, and the memory usage goes up and up, as the hours go by. So I am looking to remove all potential memory problems.

当新页面加载到iframe时，我附加了点击和焦点事件处理程序。

When the new page is loaded into the iframe, I attach click and focus event handlers.

在iframe页面被替换之前，我取消附加它们。

Just before the iframe page is to be replaced, I un-attach them.

但是，如果我检查$ .cache（同时在使用firefox的PC上进行测试，因此与我的真实系统不完全相同）每次iframe重新加载时，它仍会显示$ .cache获得越来越多的元素。

However, if I inspect $.cache (while testing on a PC with firefox, so not completely the same as my real system) it still shows $.cache gaining more and more elements each time the iframe is reload.

这是正确的做事方式吗？还有什么我可以尝试的吗？为什么$ .cache会增长？

Is this the correct way to do things? Is there anything else I can try? Why is $.cache growing?

（如果你有兴趣我使用带有Midori浏览器的raspberry pi（运行linux），尽管有其他选择我可以使用的（主要是网络工具包）浏览器。

(In case your are interested I am using a raspberry pi (runs linux) with the Midori browser, though there is a choice of other (mostly web-kit) browsers that I could use).

我用来更改iframe内容的Javascript ...

Javascript I use to change the iframe contents...

hubProxy.client.loadPage = function (pageFilename, pageType) {
    frameNode = $("#myIframe").contents();
    $("a", frameNode).off();  
    $("#myIframe")[0].src = pageFilename;
};

推荐答案

写一个包装器div来保存你的iframe容器，例如as ...

Write a wrapper div to hold your iframe container, such as...

<div id="myIframeWrapper"></div>

现在您可以在上一个iframe页面之后进行清理，这可以通过完全清除所有内容来完成在与前一个iframe相关的DOM中，然后在调用loadPage函数时使用构造函数创建一个新的iframe。

Now you can clean up after the previous iframe page, and this can be done by completely clearing out everything in the DOM related to the previous iframe, and then creating a fresh iframe by using a constructor when you invoke your loadPage function.

hubProxy.client.loadPage = function (pageFilename, pageType) {

    var myNewIframe = '<iframe id="myIframe" src="' + pageFilename + '"></iframe>';

    // Remove old iframe from the DOM and replace with new iframe
    if ($("#myIframe")) {
        $("#myIframeWrapper").empty().append( myNewIframe );
    }

    var frameNode = $("#myIframe").contents();
    $("a", frameNode).off();
};

您会注意到已经删除了分配iframe源的原始行，因为它已被占用在新的构造函数中。这样做的好处是可以使用构造函数添加其他iframe属性，例如iframe大小等。

You will notice that the original line assigning the iframe source has been removed, as it is already accounted for in the new constructor. This also has the benefit of being able to add other iframe attributes using the constructor, such as the iframe size, etc.

这篇关于避免内存泄漏将内容加载到iframe中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！