使用从 javascript 动态添加的 html-object 的问题

Question

在我的 html 中动态包含对象标记时遇到问题。 我们有一个外部服务，我们调用它来获取一些 html-fragment，它包括一个 object-tag、一个脚本和一个简单的 html-form。我获取该内容并将其添加到页面中的 div 中，然后尝试执行使用包含对象的脚本。当我使用 Firebug 进行调试时，我可以看到代码已正确插入页面中，但脚本在尝试访问对象时出错。在我看来，该对象未初始化。让我给你看一些代码来说明我的意思。

getFragment 使用 jQuery 进行 ajax 调用以获取内容。

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

plugin-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”方法并且脚本有效。但不知何故，当我之后将它动态添加到页面时它不起作用。

过去几天我在 Google 上搜索了很多次，但都没有成功。 有没有人知道如何让它发挥作用？

最好的问候， 亨里克

Answer 1

首先，并非所有浏览器都完全支持 Object 标签(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>

• 这一切都未经测试 - 因为我没有办法启动 IE 并测试它，所以我在脑海中输入了这个。

Answer 2

对于 jQuery 解决方案，我认为这应该可行：

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

    ... and then some more
});

如果您在该页面上有多个表单，则可能希望为提交按钮提供 class 或 id 并将其用作选择器。

希望这会有所帮助。

Answer 3

我在这里设置了一个测试脚本：https://dl.dropbox.com/u/74874/test_scripts/object.html

如果您打开 Firebug/Web Inspector，您会看到 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>");