系统通过iframe载入一个子页面，来模拟窗口、多页面等。系统中使用了大量js代码，为简化操作，使用了jQuery框架，使用一段时间后，发现内存泄漏很严重。尤其是页面回传后，内存消耗更是直线上升，为此，我通过各种办法防止内存泄漏，但测试结果却发现，导致内存泄漏的罪魁祸首居然是jquery!
测试方法如下：
首先是一个jq_frame.html页面
<html>
<head>
<title>jQuery 的 frame.html</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script>
$(function(){
$('a').click(function(){
$(this).attr('href','jq_main.html');
});
});
</script>
</head>
<body>
<div style="border:1px solid red; width:200px;height:200px;display:inline;">
<a href="main.html" target="content" >click me!!!</a>
</div>
<iframe name="content" id="content" src="jq_main.html" />
</body>
</html>
在其中嵌入iframe引用jq_main.html,嵌入的页面代码如下：
<html>
<head>
<title>jQuery的main.html</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
alert('click me!');
$('#btn').click(function(){
alert('click me!');
});
});
</script>
</head>
<body>
<input type="button" value="ces" id="btn" >
</body>
</html>
在sIEve中测试，自动刷新并没有内存泄露，但手动去触发则内存泄露比较严重。
如果将jQuery代码换成普通的javascript代码，则不会出现内存泄露的情况。测试页面代码如下:
<html>
<head>
<title>javascript的frame.html</title>
</head>
<body>
<div style="border:1px solid red; width:200px;height:200px;display:inline;">
<a href="main.html" target="content" >click me!!!</a>
</div>
<iframe name="content" id="content" src="main.html" />
</body>
</html>
<html>
<head>
<title>javascript的main.html</title>
<script type="text/javascript">
function clickMe(){
alert('click me!!');
}
</script>
</head>
<body onload="clickMe()">
<input type="button" value="ces" id="btn" onclick="clickMe()">
</body>
</html>
这里貌似内存泄露应归罪于jQuery，但页面独立使用jQuery是不会存在此类问题的。比如下面的独立页面。代码如下：
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<script src="jquery-1.4.4.min.js" type="text/javascript">
</script>
<style type="text/css">
#inner {
margin:0 auto;
width:150px;
height:50px;
border:1px solid green;
}
</style>
<script type="text/javascript">
$(function(){
$("#inner").click(function(){
$('#test').append($('<p>test001</p>'));
//$("#test").empty();
});
});
</script>
<title>jQuery内存泄露测试</title>
</head>
<body>
<div style="height:500px;width:500px;border:1px solid red;padding-top:100px;" id="test">
<div id="inner">click to remove me</div>
</div>
</body>
</html>
分享到：
相关推荐
Iframe 内存泄露分析是指在使用 Iframe 时，由于互相引用、闭包、跨页面泄漏、伪泄漏等原因，导致浏览器内存泄漏的问题。这种问题在 Ajax 盛行以前并不是什么大问题，因为都是通过页面跳转和刷新来进行与服务端的...
总结，"jquery 跨iframe拖拽"是利用jQuery和jQuery UI的拖拽功能，结合跨IFrame通信技术，实现元素在不同IFrame之间的动态交互。虽然涉及的技术点较多，但正确理解和运用这些工具，可以为用户带来更丰富的交互体验。
本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能，以便于创建更丰富的用户体验和更高效的页面加载策略。 首先，我们需要理解iframe的基本概念。Iframe（Inline Frame）是HTML中的一个元素，它允许我们在...
jquery.iframe-transport.js包
4. **缓存**：jQuery中的`data()`方法用于存储与DOM元素相关的数据，如果不清理，可能会造成内存泄漏。使用`$.removeData()`可以清除特定元素的数据。 5. **插件问题**：某些第三方jQuery插件可能也有内存管理问题...
jquery.iframe-transport.js
总之，“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具，它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件，可以避免手动计算和调整`iframe`...
本篇将深入探讨jQuery的核心库以及两个重要的插件——jQuery File Upload和jQuery Iframe Transport。 首先，jQuery的核心库jQuery-1.8.3.min.js和jQuery-2.1.4.min.js是其发展过程中的两个稳定版本。1.8.3属于1.x...
jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...
本教程将详细讲解如何使用jQuery来实现iframe的功能。 首先，我们需要在HTML页面中引入jQuery库。通常，我们可以通过CDN链接或者本地文件引用的方式进行引入。例如，使用CDN链接可以这样写： ```html ...
不过，当iframe和父页面属于同一域时，可以通过JavaScript或jQuery来操作父页面中的元素和方法。本文将详细介绍如何使用jQuery来查找和操作iframe父页面中的元素和方法。 首先，需要明确iframe元素可以被视为一个...
前端项目-jquery.iframe-transport,jQuery plugin that implements an iframe transport so that ajax calls support the uploading of files using standard HTML file input fields
本主题将深入探讨如何使用jQuery实现一个简单的、实用的iframe弹出层。通过这个教程，您将了解到如何创建一个能够加载外部网页或内容到弹出窗口中的功能。 首先，确保在您的项目中引入了jQuery库。您可以从jQuery...
总之，这个例子展示了如何结合jQuery和iframe来构建一个动态的多标签页系统，这在很多Web应用程序中都有实用价值。通过学习和理解这两个示例，开发者不仅可以提升前端技能，还能更好地理解和应用jQuery插件，提高...
通过深入理解这些知识点，并结合提供的"Iframe模拟Ajax-经典"压缩包中的代码示例和文档，你可以更有效地掌握如何在面临同源策略限制时，使用Iframe来模拟Ajax请求，实现跨域数据交互。这将有助于你在开发过程中解决...
标题"jquery tab 切换页面 支持iframe"所指的就是如何在jQuery Tab组件中嵌入和切换`iframe`内容。 jQuery Tab的基本原理是通过JavaScript和CSS来创建一个可交互的导航条，每个选项对应一个内容区域。当用户点击...
在提供的压缩包文件中，"jquery_点击按钮_隐藏父页-引用页的iframe"可能包含了示例代码或演示页面，你可以参考这些资源来进一步理解和实践上述步骤。通过熟练掌握`jQuery`的用法，你可以创建出更多复杂且富有交互性...
在这个“jQuery内嵌iframe导航菜单”的主题中，我们将深入探讨如何利用jQuery来创建一个动态的、内嵌在iframe中的导航菜单。这个菜单可以作为网页中的一个模块，用于展示和切换不同的页面内容，而无需重新加载整个...
jQuery和ajax技术的结合，提供了一种更为高效和友好的解决方案。下面详细介绍如何使用jQuery和ajax代替iframe，并说明其优势。 首先，让我们理解jQuery和ajax的基本概念。jQuery是一个快速、简洁的JavaScript库，它...