views:

38

answers:

1

I am wondering why the following code does not create two of my activex object. When the object tag is directly in the HTML it works fine, but for the life of me I can't dynamically create the object item. Is this a security issue or something? I am finding a difficult time finding documentation on this problem.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="InkWebForm._Default" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>         
       <script language="javascript">

           window.onload = function() {
               var s = '<OBJECT id="inkImage" classid="InkControls.dll#InkControls.ResizableInk" VIEWASTEXT></OBJECT>';
               document.getElementById("inkHolder").innerHTML = s;
           };  
       </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>    
    <!-- This one gets created -->
    <OBJECT id="inkImage2" classid="InkControls.dll#InkControls.ResizableInk" VIEWASTEXT>
    </OBJECT>        

    <!-- this one should get inserted but never gets created -->
    <div id="inkHolder"></div>
    </div>
    </form>
</body>
</html>

Well when I explore the dom the object explorer does show the item but IE renders a little square box and not the activex control.

Here goes the second attempt based on casablanca's suggestion. I think there might be a security issue going on here as per your suggestion this should work but does not. Same problem.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="InkWebForm._Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">       
       <script language="javascript">

           window.onload = function() {

               var obj = document.createElement('object');
               obj.setAttribute('id', 'inkImage');
               obj.setAttribute('classid', 'InkControls.dll#InkControls.ResizableInk');             
               document.getElementById('inkHolder').appendChild(obj);
           };  
       </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
     <OBJECT id="inkImage2" classid="InkControls.dll#InkControls.ResizableInk">
    </OBJECT>   

    <div id="inkHolder"></div>    

    </div>
    </form>
</body>
</html>
A: 

You shouldn't be using innerHTML to create new elements. If you use document.createElement then it should work fine:

var obj = document.createElement('object');
// set object properties here
document.getElementById('inkHolder').appendChild(obj);

Edit:

I just noticed that the objects you are dealing with are ASP server-side objects, which are instantiated on the server rather than on the client. In this case, JavaScript won't help you since it's executed on the client. You could look at the HTML source in your browser to see exactly what code is generated by ASP and if you replicate that in JavaScript, it might work.

casablanca
The object is a windows form user control and is client side. It is not the most common approach but we are using it Next I will try wrapping it around an iframe and seeing if that will work.
voam