Solution to memory leak problem when using jquery to reset the IFRAME address under IE _jquery

Source: Internet
Author: User

There is an IFRAME on the page:

Copy Code code as follows:

<iframe src= ' a.html ' ></iframe>
<button> Test iframe Leak </button>

The contents of a.html are as follows:

Copy Code code as follows:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>insert title here</title>
<script type= "Text/javascript" src= "Jquery/jquery.min.js" ></script>
<style>
. hack{
/* 1. All browsers are valid/*
Background-color:green;
/* 2.ie8~ie10,opera valid, but opera compatibility can not be considered * *
Background-color:blue\0;
/* 3.ie9~ie10 valid, combined with 2, in 2 to write first for IE8, in this section for ie9| IE10 *
background-color:red\9\0;
/* 4.ie7 valid, with 23 combination can distinguish ie7/ie8/(ie9| IE10) * * *
+background-color:yellow;
}
/* for ie10+ * *
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
. hack{
Background-color:pink;
}
}

</style>
<body>

The suffix "\9" ie6/ie7/ie8/ie9/ie10 is in effect.
The suffix "ie8/ie9/ie10" is in force and is the IE8/9/10 hack
The suffix "\9\0" only takes effect on Ie9/ie10, is IE9/10 hack
Prefix "*" is valid for IE7
Prefix "+" is valid for IE7
Selector prefix @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none)
Valid for IE10

Copy Code code as follows:

<input type= ' text ' value= ' Chinese ' ></input>
<div class= ' hack ' style= ' width:100px;
height:100px; " ></div>
<div id= "1" style= "padding:5px;position:relative;background-color:green;margin:10px;border:20px solid Red;width : 100%;height:200px; " >
</div>
<div id= "2" ></div>
<span>SPAN</span>
</body>

B.html contents are as follows:

Copy Code code as follows:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>insert title here</title>
<script type= "Text/javascript" src= "Jquery/jquery.min.js" ></script>
<body>
<span>SPAN</span>
</body>

There is a transmission on the Internet, the following writing can reduce memory leakage:

Copy Code code as follows:

var framedom = $ (' iframe:eq (0) ') [0];
var framewin = Framedom.contentwindow;

try{
FrameWin.document.write (");
FrameWin.document.clear ();
}catch (e) {};
FRAMEDOM.SRC = ' b.html ';

So what's the effect?

To set a URL directly

Copy Code code as follows:

var flag = true;
var framedom = $ (' iframe:eq (0) ') [0];
$ (' button '). On (' click ', function () {
if (flag) {
var framedom = $ (' iframe:eq (0) ') [0];
var framewin = Framedom.contentwindow;
/*
try{
FrameWin.document.write (");
FrameWin.document.clear ();
}catch (e) {};
*/
FRAMEDOM.SRC = ' b.html ';
Flag = false;
}else{
var framedom = $ (' iframe:eq (0) ') [0];
var framewin = Framedom.contentwindow;
/*
try{
FrameWin.document.write (");
FrameWin.document.clear ();
}catch (e) {};
*/
FRAMEDOM.SRC = ' a.html ';
Flag = true;
}
$ (' #console '). Append (flag?) ' Switch to a.html ': ' Switch to b.html ');
});

Use the Sieve test: Each time you switch, #leaks增加28左右.

Writing two: According to the network transmission

Copy Code code as follows:

<script>
var flag = true;
var framedom = $ (' iframe:eq (0) ') [0];
$ (' button '). On (' click ', function () {
if (flag) {
var framedom = $ (' iframe:eq (0) ') [0];
var framewin = Framedom.contentwindow;
try{
FrameWin.document.write (");
FrameWin.document.clear ();
}catch (e) {};
FRAMEDOM.SRC = ' b.html ';
Flag = false;
}else{
var framedom = $ (' iframe:eq (0) ') [0];
var framewin = Framedom.contentwindow;
try{
FrameWin.document.write (");
FrameWin.document.clear ();
}catch (e) {};
FRAMEDOM.SRC = ' a.html ';
Flag = true;
}
$ (' #console '). Append (flag?) ' Switch to a.html ': ' Switch to b.html ');
});
</script>

Use the Sieve test: Each time you switch, #leaks增加28左右. There's no difference between the wording

Writing three:

Copy Code code as follows:

var flag = true;
var framedom = $ (' iframe:eq (0) ') [0];
$ (' button '). On (' click ', function () {
if (flag) {
/*
try{
FrameDom.contentWindow.document.write (");
FrameDom.contentWindow.document.clear ();
FrameDom.contentWindow.close ();
}catch (e) {};
*/
$ (' iframe:eq (0) '). Remove ();
$ (' body '). Append ("<iframe src= ' b.html ' ></iframe>");
Flag = false;
}else{
/*
try{
FrameDom.contentWindow.document.write (");
FrameDom.contentWindow.document.clear ();
FrameDom.contentWindow.close ();
}catch (e) {};
*/
$ (' iframe:eq (0) '). Remove ();
$ (' body '). Append ("<iframe src= ' a.html ' ></iframe>");
Flag = true;
}
});

Using the Sieve test: #leaks平均为 3, the difference between the first two is huge

Writing four: Note that the writing of the three notes a piece of code, remove the annotation what?

Copy Code code as follows:

var flag = true;
var framedom = $ (' iframe:eq (0) ') [0];
$ (' button '). On (' click ', function () {
if (flag) {
try{
FrameDom.contentWindow.document.write (");
FrameDom.contentWindow.document.clear ();
FrameDom.contentWindow.close ();
}catch (e) {};
$ (' iframe:eq (0) '). Remove ();
$ (' body '). Append ("<iframe src= ' b.html ' ></iframe>");
Flag = false;
}else{
try{
FrameDom.contentWindow.document.write (");
FrameDom.contentWindow.document.clear ();
FrameDom.contentWindow.close ();
}catch (e) {};
$ (' iframe:eq (0) '). Remove ();
$ (' body '). Append ("<iframe src= ' a.html ' ></iframe>");
Flag = true;
}
});

There is no significant difference between this writing and writing 3, each switch #leaks still increase by about 3

Therefore, it can be concluded that the best solution to reset the IFRAME address memory leak method is to kill it, and then add one!

It's not necessarily the net.

Note: The native test environment is WIN7 x64 IE9

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.