Hide and Show Container Element of Silverlight Will Cause Reload on Browsers Besides IE

I found a strange behavior of Sivlerlight plugin on browsers besides IE. 

Check the blowing sample.  There are a Silverlight application(XMLViewer.xap) inside a DIV which named dvSL and two buttons, btnShow and btnHide, with onclick event to set getElementById("dvSL").style.display to "" or "none" to change visibility of dvSL.  You can try the live demo.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Load Event Test</title>
    <script type="text/javascript">
        function onSilverlightLoad(s, e) {
            alert("Silverlight Loaded!");
        }
        function show() { document.getElementById("dvSL").style.display = ""; }
        function hide() { document.getElementById("dvSL").style.display = "none"; }
    </script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">
    <input type="button" id="btnShow" value="Show" onclick="show();" />
    <input type="button" id="btnHide" value="Hide" onclick="hide();" />
    <div id="dvSL">
        <object data="data:application/x-silverlight-2," 
                type="application/x-silverlight-2" width="200" height="200">
          <param name="source" value="SL/XMLViewer.xap"/>
          <param name="onLoad" value="onSilverlightLoad" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="4.0.50401.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" 
             style="text-decoration:none">
               <img src="http://go.microsoft.com/fwlink/?LinkId=161376" 
              alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object>
        <iframe id="_sl_historyFrame" 
        style="visibility:hidden;height:0px;width:0px;border:0px">
        </iframe>
    </div>
    </form>
</body>
</html>

According to my expection, the visibility change only affect the "visual visibility" of elements, including Siverlight object in the page, but not the "residency in memory" of elements. 

In IE8, it's true! No matter how many times you press btnHide and btnShow, you will get only once "Silverlight Loaded!" popup.  But in browsers besides IE, each time you press btnShow to make Sivlerlight object visible again, you get one "Silverlight Loaded!" popup. I have tested this on Chrom, Firefox, Safari and Opera, the Silverlight seems reloaded each time when its container becomes visible from hidden status.  So, remember to check your logic when you try to toggle the visibility of Silverlight host.

PS: I found a related post in Silverlight forum and found "window.focus()" workaround, but it failed in my test. (if I realized it correctly)

function hide() { window.focus(); document.getElementById("dvSL").style.display = "none"; }

【中文摘要】

發現當網頁上的Silveright由隱藏切換為顯示時,在IE以外的瀏覽器(Chrome, Firefox, Safari, Opera)上會觸發重新載入,連帶地Silverlight的OnLoad事件也會被反覆觸發,應用時請小心。這裡有Demo給大家實驗看看。Silverlight論壇上有篇相關文章 ,提到用window.focus()的做法避開,但在我的測試中並未成功。

歡迎推文分享:
Published 14 July 2010 01:55 PM 由 Jeffrey
Filed under: ,
Views: 9,709



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<July 2010>
SunMonTueWedThuFriSat
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication