How to fixed Silverlight Control Content always null from Javascript Access

I got a quite tough issue when  i try access the siliverlight object from the client side.

the following snippet of client side code

function search() {
            try {
                var silverLightControl = document.getElementById("silverlightControl");
                silverLightControl.Content.Page.SetUser(document.getElementById("txtUser").value);
            } catch (e) {
                alert(e.description);
            }
        }


the page with silverlight object embeded

    <div id="silverlightControl">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/SLAspxCommunication.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="5.0.61118.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.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>








in the silverlight object class we have registered the page as javascriptable object with following line

HtmlPage.RegisterScriptableObject("Page", this);

 public MainPage()
        {
            InitializeComponent();
            _users = GenerateList();
            HtmlPage.RegisterScriptableObject("Page", this);
        }


the function looks simple that I just want to call the siliverlight function to search the user, unfortunately

this error message always popped up




when i debug the process, it indicate that the control did not contain an  Content element. the main cause of

this error is that

var silverLightControl = document.getElementById("silverlightControl");

will load the Div Control instead of the object container that host the silverlight object. after i set the id to be

 silverlightControl for the object tag. then  search function funtion well and access the SetUser function in the

silverlight object.


   <div>
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" id="silverlightControl">
          <param name="source" value="ClientBin/SLAspxCommunication.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="5.0.61118.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.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>