Problem mit dynamisch hinzugefügtem HTML-Objekt von Javascript

Question

Ich habe ein Problem mit der dynamischen Aufnahme eines Objekt-Tags in meinem HTML. Wir haben einen externen Dienst, den wir aufrufen, um ein HTML-Fragment zu bekommen, es enthält ein Objekt-Tag, ein Skript und ein einfaches HTML-Formular. Ich nehme diesen Inhalt und füge ihn zu einem div auf meiner Seite hinzu und versuche dann, das Skript auszuführen, das das enthaltene Objekt verwendet. Beim Debuggen mit Firebug kann ich sehen, dass der Code korrekt in die Seite eingefügt wurde, aber das Skript erhält einen Fehler, wenn es versucht, auf das Objekt zuzugreifen. Es scheint mir, dass das Objekt nicht initialisiert wird. Lassen Sie mich Ihnen einen Code zeigen, um zu verdeutlichen, was ich meine.

getFragment macht einen AJAX-Aufruf mit jQuery, um den Inhalt zu erhalten.

var htmlSnippet = RequestModule.getFragment(dto); 
$('#plugin').html(htmlSnippet).hide(); 

Die mitgelieferten Inhalt in plugin-div sieht aus wie dieses

<div id="plugin" style="display: none; "> 
    Browser: 
    Chrome 
    <object name="signer" id="signer" type="application/x-personal-signer2"></object> 

<form method="POST" name="signerData" action="#success"> 
    <input name="nonce" value="ASyhs..." type="hidden"> 
    <input name="signature" value="" type="hidden"> 
    <input name="encodedTbs" value="U2l..." type="hidden"> 
    <input name="provider" value="nexus-personal_4X" type="hidden"> 

    <input type="submit" onclick="doSign()" value="Sign"> 
</form> 
</div> 

Die Javascript, das die „Unterzeichner“ Objekt zu verwenden versucht, sieht wie folgt aus:

function doSign(){ 
    var signer2 = document.getElementById("signer"); 

    retVal = signer2.SetParam('TextToBeSigned', 'some value...'); 

    ... and then some more 
} 

Wenn ich die signer2.SetParam-Methode aufruft, erhalte ich die Fehlermeldung

Object #<an HTMLObjectElement> has no method 'SetParam' 

Aber wenn ich die Originalseite benutzen, wo der Inhalt geladen wird, wenn die Seite mit dem Skript lädt funktioniert, damit ich weiß, dass die ‚SetParam‘ Methode für das Objekt vorhanden ist, und dass das Skript funktioniert. Aber irgendwie funktioniert es nicht, wenn ich es dynamisch nachträglich zur Seite hinzufüge.

Ich habe dies die letzten paar Tage ohne Glück viel gegoogelt. Hat jemand eine Idee, wie man das zur Arbeit bringt?

Mit freundlichen Grüßen, Henrik

Answer 1

Vor allem Object-Tag ist nicht vollständig in allen Browsern unterstützt (Source) Als nächstes wird aus meiner Erfahrung, jQuery (die auf document.createDocumentFragment stützt sich stark) manchmal befestigen versagt/Triggerereignisse auf dynamisch erstellt/geklonten DOM-Knoten, die erklären könnte, Warum konnte Ihr Objekt nicht initialisiert werden?

Das gesagt, um Ihr Problem zu beheben, schlage ich vor, native document.createElement und document.appendChild Methoden anstelle von jQuery.html zu verwenden. Sie können versuchen, document.innerHTML, aber wenn das fehlschlägt, können Sie immer mit denen gehen, die ich bereits erwähnt habe.

Mein Vorschlag ist, entweder zu Ihren Diensten zu ändern zu ersetzen:

<script type="text/javascript"> 
function addElement(parentid, tag, attributes) { 
    var el = document.createElement(tag); 
    // Add attributes 
    if (typeof attributes != 'undefined') { 
     for (var a in attributes) { 
      el.setAttribute(a, attributes[a]); 
     } 
    } 

    // Append element to parent 
    document.getElementById(parentid).appendChild(el); 
} 
addElement('plugin', 'object', {name:"signer",id:"signer",type:"application/x-personal-signer2"}); 
</script> 

oder wenn Sie den Inhalt nicht ändern, die vom Dienst, führt diese zurückgeführt wird, nachdem Sie den Inhalt auf Ihrer Seite einzufügen:

<script type="text/javascript"> 
    /* 
    * Goes through al the object tags in the element with the containerid id 
    * and tries to re-create them using the DOM builtin methods 
    */ 
    function reattachObjectTags(containerid) { 
     jQuery('#'+containerid+' object').each(function(){ 
      var attrs = {}, el = this; 
      // We're insterested in preserving all the attributes 
      var saved_attrs = {}, attr; 
      for(var i=0; i < el.attributes.length; i++) { 
       attr = el.attributes.item(i); 
       if(attr.specified) { 
        saved_attrs[attr.nodeName]=attr.nodeValue; 
       } 
      } 
      this.parentNode.removeChild(this); 

      var new_element = document.createElement('object'); 
      for (var a in saved_attrs) { 
       new_element.setAttribute(a,saved_attrs[a]); 
      } 
      document.getElementById(containerid).appendChild(new_element); 
     }); 
    } 

    // Do your stuff 
    var htmlSnippet = RequestModule.getFragment(dto); 
    $('#plugin').html(htmlSnippet).hide(); 
    // reattach all the object elements in #plugin 
    reattachObjectTags('plugin'); 
</script> 

• das ist alles UNTESTED - ich dies den Anfang meines Geistes getippt ab, da ich IE nicht die Mittel haben, um Feuer und dies zu testen.

Answer 2

Ich habe hier ein Testskript ein: https://dl.dropbox.com/u/74874/test_scripts/object.html

Wenn Sie Firebug/Web Inspector öffnen, werden Sie sehen, dass die SetParam Methode in-fact ist, nicht definiert. Ich weiß nicht, was es tun soll, aber es ist in beiden Fällen nicht definiert. Wenn Sie versuchen, Ihrer Einbettung Tags <param> hinzuzufügen, können Sie dazu die DOM-API verwenden. Es gibt einige Codes im Testskript, die das tut, aber ich werde es hier einfügen sowieso:

var obj_signer = document.getElementById('signer'); 

var obj_p = document.createElement('param'); 
    obj_p.id = "myp2"; 
    obj_p.name = "TextToBeSigned"; 
    obj_p.value = "some value ..."; 
    obj_p.setAttribute('valueType', 'ref'); 
obj_signer.appendChild(e); 

Oder schneller mit jQuery:

$("#signer").append("<param id='myp2' name='TextToBeSigned' value='some value ...' valueType='ref'></param>"); 

Answer 3

Für eine jQuery-Lösung, ich denke, das sollte Arbeit:

$("input:submit").click(function(){ 
    $("#signer").append('<param name="TextToBeSigned" value="some value ...">'); 

    ... and then some more 
}); 

Könnte den Submit-Button ein class oder id und verwendet, die als Wähler geben möchten, wenn Sie allerdings mehrere Formulare auf dieser Seite hast.

Hoffe, das hilft.