Javascript 使用iframe在Metro应用程序中嵌入YouTube视频时内存泄漏
我想在我的Metro应用程序中播放一些YouTube视频。我使用YouTube Iframe API()将YouTube视频嵌入到我的应用程序中。然后我遇到了严重的内存泄漏问题。如果我嵌入一个YouTube视频,然后将其删除,内存将增加约5MB,再也不会减少。演示代码如下: default.html:Javascript 使用iframe在Metro应用程序中嵌入YouTube视频时内存泄漏,javascript,html,iframe,youtube,microsoft-metro,Javascript,Html,Iframe,Youtube,Microsoft Metro,我想在我的Metro应用程序中播放一些YouTube视频。我使用YouTube Iframe API()将YouTube视频嵌入到我的应用程序中。然后我遇到了严重的内存泄漏问题。如果我嵌入一个YouTube视频,然后将其删除,内存将增加约5MB,再也不会减少。演示代码如下: default.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframeTest</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- iframeTest references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body style ="">
<button id="remove" style="display:block; float:left;">remove a video</button>
<button id="add" style="display:block; float:left;">add a video</button>
</body>
</html>
iframeTest
删除视频
添加视频
default.js片段:
document.getElementById("remove").addEventListener("click", function () {
var ifrs = document.querySelectorAll('div');
if (ifrs.length > 0) {
document.body.removeChild(ifrs[ifrs.length - 1]);
}
});
document.getElementById("add").addEventListener("click", function(){
var testYoutubeDiv = document.createElement('div');
testYoutubeDiv.style.cssFloat = 'left';
testYoutubeDiv.style.width = '400px';
testYoutubeDiv.style.height = '300px';
MSApp.execUnsafeLocalFunction(function () {
testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>";
});
document.body.appendChild(testYoutubeDiv);
});
document.getElementById(“删除”).addEventListener(“单击”),函数(){
var ifrs=document.querySelectorAll('div');
如果(ifrs.length>0){
文件.body.removeChild(ifrs[ifrs.length-1]);
}
});
document.getElementById(“add”).addEventListener(“单击”,函数)(){
var testYoutubeDiv=document.createElement('div');
testYoutubeDiv.style.cssFloat='left';
testYoutubeDiv.style.width='400px';
testYoutubeDiv.style.height='300px';
MSApp.execUnsaleLocalFunction(函数(){
testYoutubeDiv.innerHTML=“”;
});
document.body.appendChild(testYoutubeDiv);
});
然后,我编写了一个类似的.html文件,并在IE10.0和Chrome中对其进行了测试。我发现IE10.0也有内存泄漏问题,但chrome没有。而且IE10.0中的内存泄漏问题没有Metro应用严重。
测试html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframeTest</title>
<script type = "text/javascript">
function load() {
document.getElementById("remove").addEventListener("click", function () {
var ifrs = document.querySelectorAll('div');
if (ifrs.length > 0) {
document.body.removeChild(ifrs[ifrs.length - 1]);
}
});
document.getElementById("add").addEventListener("click", function () {
var testYoutubeDiv = document.createElement('div');
testYoutubeDiv.style.cssFloat = 'left';
testYoutubeDiv.style.width = '400px';
testYoutubeDiv.style.height = '300px';
testYoutubeDiv.innerHTML = "<iframe id='player' type='text/html' width='400' height='300' src='http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com' frameborder='0'></iframe>";
document.body.appendChild(testYoutubeDiv);
});
}
</script>
</head>
<body onload ="load()">
<button id="remove" style="display:block; float:right;">remove a video</button>
<button id="add" style="display:block; float:right;">add a video</button>
</body>
</html>
iframeTest
函数加载(){
document.getElementById(“删除”).addEventListener(“单击”),函数(){
var ifrs=document.querySelectorAll('div');
如果(ifrs.length>0){
文件.body.removeChild(ifrs[ifrs.length-1]);
}
});
document.getElementById(“add”).addEventListener(“单击”,函数)(){
var testYoutubeDiv=document.createElement('div');
testYoutubeDiv.style.cssFloat='left';
testYoutubeDiv.style.width='400px';
testYoutubeDiv.style.height='300px';
testYoutubeDiv.innerHTML=“”;
document.body.appendChild(testYoutubeDiv);
});
}
删除视频
添加视频
我注意到IE(也许还有Metro应用程序)并没有使用WebKit引擎来处理javascript代码。有没有办法减少Metro应用程序中的内存泄漏?在html文件中创建一个iframe
<iframe id="ifr_video"></iframe>
在HTML中
<video id="VideoSource" style="border:1px solid black;" controls="controls" ></video>
<iframe class="youtube-player" id="ifr_video" type="text/html" width=100% height=100% allowfullscreen frameborder="0"></iframe>
参考资料:内存不打算/保证立即(或永远)释放。根据你的演示,我们不能说它是否泄漏。如果您添加和删除它200次,它会增长到1GB吗?正如您所说,我在Metro应用程序中测试代码。我添加了大约100个YouTube视频,然后在它们完全加载后删除它们,内存增加了大约600MB。然后我吃午饭,散散步。当我回来时,内存仍然保持在550MB左右。我们能认为这是内存泄漏吗?实际上不是。当确实需要收集垃圾时,它可能会等待片刻
<video id="VideoSource" style="border:1px solid black;" controls="controls" ></video>
<iframe class="youtube-player" id="ifr_video" type="text/html" width=100% height=100% allowfullscreen frameborder="0"></iframe>
id("VideoSource").msPlayToSource.connection.addEventListener("statechanged", playToSrcStateChangeHandler);
function playToSrcStateChangeHandler(eventIn) {
var states = Windows.Media.PlayTo.PlayToConnectionState;
if (eventIn.currentState === states.disconnected) {
WinJS.log && WinJS.log("PlayTo connection state: Disconnected", "sample", "status");
} else if (eventIn.currentState === states.connected) {
WinJS.log && WinJS.log("PlayTo connection state: Connected", "sample", "status");
} else if (eventIn.currentState === states.rendering) {
WinJS.log && WinJS.log("PlayTo connection state: Rendering", "sample", "status");
}
}
Video_Path = "http://www.youtube.com/embed/" + new_id;
//new_id is the Youtube video id For example,..
in http://www.youtube.com/watch?v=ZnehCBoYLbc , id is ZnehCBoYLbc
function playYouTubeVideo(Video_Path) {
document.getElementById("ifr_video").src = Video_Path;
id("VideoSource").style.display='none';
}
function playWebContent(Video_Path) {
document.getElementById("ifr_video").style.display = 'none';
var localVideo = id("VideoSource");
var videoStabilization = Windows.Media.VideoEffects.videoStabilization;
localVideo.src = Video_Path;
localVideo.play();
}