使用動態添加html對象從javascript的問題

我有一個問題，動態地在我的HTML中包含對象標籤。我們有一個外部服務，我們調用它來獲得一些html片段，它包括一個對象標籤，一個腳本和一個簡單的html表單。我將這些內容添加到我的頁面中的div中，然後嘗試執行使用包含對象的腳本。當我使用Firebug進行調試時，可以看到代碼已正確插入到頁面中，但腳本在嘗試訪問該對象時出現錯誤。在我看來，該對象沒有初始化。讓我給你看一些代碼來舉例說明我的意思。使用動態添加html對象從javascript的問題

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」的方法。但不知何故，當我動態地將其添加到頁面後，它不起作用。

在過去的幾天裏我沒有運氣，我搜索了很多東西。有沒有人有任何想法如何讓這個工作？

最好的問候，亨裏克

來源

2010-12-01 Henrik Reinhold

所有對象標記首先沒有完全在所有瀏覽器都支持(Source) 接下來，從我的經驗是，jQuery（這在很大程度上依賴於document.createDocumentFragment）有時無法連接/動態地創建/複製DOM節點觸發事件，這可以解釋爲什麼你的對象無法初始化。

這就是說，要嘗試解決您的問題，我建議使用本機document.createElement和document.appendChild方法而不是jQuery.html。您可以嘗試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>

這是所有UNTESTED - 我輸入這我就放心了頂部，因爲我沒有火起來IE和測試這個手段。

來源

2011-01-13 18:27:59 ArtBIT

我已經建立了一個測試腳本的位置：https://dl.dropbox.com/u/74874/test_scripts/object.html

如果你打開螢火/ Web檢查，你會看到SetParam方法是，事實上，沒有定義的。我不知道它應該做什麼，但在任何情況下都沒有定義。如果您試圖將<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：

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

來源

2010-12-01 12:41:10 aditya

感謝您的幫助，但這並不能解決我的問題。實際上我試圖在對象鏈接到的應用程序上調用SetParam方法。它應該是可用的，它可以工作，如果我加載頁面加載對象時，而不是動態地將其添加到頁面後。後來在腳本中，我嘗試通過執行signer2.PerformAction（'Sign'）來調用另一個方法，該方法也不起作用。 – 2010-12-01 14:24:37

@Henrik Firefox是否支持這些僅限於IE的方法之一？我真的無法在任何地方找到任何有關`SetParam`的文檔。 – aditya 2010-12-01 14:28:04

據我所知，SetParam方法在對象標籤上不可用。它實際上是一種可以在底層對象本身上調用的方法。有點像他們做這個網頁時，他們做mySwf.myFlexFunction（..）http://livedocs.adobe.com/flex/3/html/help.html?content=passingarguments_5.html – 2010-12-01 14:43:27

對於一個jQuery的解決方案，我認爲這應該工作：

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

    ... and then some more 
});

可能想給提交按鈕class或id和使用，作爲一個選擇，如果你有一個頁面上的多個形式雖然。

希望這會有所幫助。

來源

2010-12-01 12:42:51

使用動態添加html對象從javascript的問題

回答

相關問題