dynamically create object tags in javascript

Question 1

dynamically create object tags in javascript

javascript internet-explorer object-tag

voam · Jul 2, 2010 · Viewed 8.1k times · Source

Answer

Answer

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.

Question 2

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

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

dynamically create object tags in javascript

Answer

Related questions