Проблема с использованием динамически добавленного html-объекта из javascript

Question

У меня проблема с динамическим включением тега объекта в мой html. У нас есть внешняя служба, которую мы вызываем, чтобы получить некоторый html-фрагмент, он включает в себя объект-тег, скрипт и простую html-форму. Я беру этот контент и добавляю его в div на моей странице, а затем пытаюсь выполнить скрипт, который использует включенный объект. Когда я отлаживаю использование Firebug, я вижу, что код правильно вставлен на страницу, но скрипт получает сообщение об ошибке при попытке доступа к объекту. Мне кажется, что объект не инициализирован. Позвольте мне показать вам некоторый код, чтобы показать, что я имею в виду.

getFragment выполняет вызов ajax с использованием jQuery для получения содержимого.

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> 

The 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) Далее, из моего опыта, 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 и проверить это.

Answer 2

Я создал тестовый сценарий здесь: https://dl.dropbox.com/u/74874/test_scripts/object.html

Если открыть Firebug/веб-инспектор, вы увидите, что метод 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>"); 

Answer 3

Для решения JQuery, я думаю, что это должно работа:

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

    ... and then some more 
}); 

может дать кнопку представить class или id и использовать его в качестве селектора, если у вас есть несколько форм на этой странице, хотя.

Надеюсь, это поможет.