javascriptから動的に追加されたHTMLオブジェクトを使用している問題

Question

HTMLにオブジェクトタグを動的に組み込むことに問題があります。 私たちは、いくつかのhtmlフラグメントを取得するために呼び出す外部サービスを持っています。これには、オブジェクトタグ、スクリプト、および単純なHTMLフォームが含まれています。私はそのコンテンツを取り出してページのdivに追加してから、そのオブジェクトを使用するスクリプトを実行しようとします。 Firebugを使ってデバッグすると、コードがページに正しく挿入されていることがわかりますが、オブジェクトにアクセスしようとするとスクリプトにエラーが発生します。オブジェクトは初期化されていないようです。私が意味するものを具体化するためのコードをいくつか見せてください。

getFragmentは、コンテンツを取得するためにjQueryを使用してajax呼び出しを行います。

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

プラグインのdivに含まれるコンテンツは、「署名者」オブジェクトを使用しようとすると、この

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

javascriptのように見えますが、次のようになります

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

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

    ... and then some more 
} 

これは私がsigner2.SetParamメソッドを呼び出したときにエラーが発生した場合です。

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

しかし、私は、コンテンツがページにスクリプトをロードするときにロードされた元のページを使用するときに、私は「SETPARAM」メソッドは、オブジェクト上で、スクリプトが動作することが存在することを知って動作します。しかし、後でそれを動的にページに追加すると、何とか動作しません。

私はこのことを、運がない日の最後の数日間たくさんのものに巡回しました。 誰かがこれを動作させる方法について考えている人はいますか？

敬具、 ヘンリク

Answer 1

まず、完全に(Source) 次に、私の経験、（重くdocument.createDocumentFragmentに依存している）のjQuery時々アタッチに失敗したから/動的に作成/複製されたDOMノード上のトリガ・イベントが、説明することができたすべてのブラウザでサポートされていません。オブジェクトが初期化に失敗した理由

あなたの問題を解決するために、jQuery.htmlの代わりにネイティブdocument.createElementとdocument.appendChildメソッドを使用することをお勧めします。 document.innerHTMLを試すことができますが、失敗した場合は、先ほど説明したものと一緒に行くことができます。

私の提案は交換してくださいサービスを変更するかのいずれかである：

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

をしたり、サービスによって返されたコンテンツを変更することができない場合、あなたのページの上にコンテンツが含ま後、これを実行します。

を

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

• これは、すべてのテストされていません - 私はIEを起動し、これをテストするための手段を持っていないので、私は、私の心の上にこれをオフに型付けされました。

Answer 2

私はここでテストスクリプト設定しました：あなたはFirebugの/ウェブインスペクタを開く場合は、SetParam方法がイン事実であることがわかりますhttps://dl.dropbox.com/u/74874/test_scripts/object.html

を、定義されていません。私はそれが何をすべきかを知らないが、どちらの場合でも定義されていない。埋め込みに<param>タグを追加する場合は、DOM APIを使用して埋め込みます。そこにいくつかのコードがあることないテストスクリプトであるが、私はとにかくここに貼り付けます：

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); 

またはより高速のjQueryを使用して：jQueryのソリューションのために

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

Answer 3

、私はこれはすべきだと思います作品：

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

    ... and then some more 
}); 

は、送信ボタンclassまたはidを与え、あなたががそのページに複数のフォームを持っている場合は、セレクタとしてそれを使用する場合があります。

これが役に立ちます。すべてのObjectタグの