Today, I am going to show you how to fixed Silverlight 5 Control Content always null from Javascript Access. I got an Error when  I try to access the Silverlight object from the client side. Here’s the following snippet code from client site.

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 embedded
    <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>

At 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 Silverlight function to search the user, unfortunately. This error message below always popped up.

When I debug the process, it indicate that the control did not contain a Content element.  This Error
var silverLightControl = document.getElementById("silverlightControl");

It 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>