javascript - 从 javascript 使用动态添加的 html 对象时出现问题

Question

我在 html 中动态包含对象标签时遇到问题。我们有一个外部服务，我们调用它来获取一些 html 片段，它包括一个对象标签、一个脚本和一个简单的 html 表单。我获取该内容并将其添加到我页面中的一个 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”方法存在于对象上并且脚本有效。但是不知何故，当我之后将它动态添加到页面时它不起作用。

过去几天我在谷歌上搜索了很多，但都没有找到。有谁知道如何让它发挥作用吗？

最好的问候，亨里克

Answer 1

首先，并非所有浏览器都完全支持 Object 标签 (Source)接下来，根据我的经验，jQuery(严重依赖于 document.createDocumentFragment)有时无法在动态创建/克隆的 DOM 节点上附加/触发事件，这可以解释为什么您的对象无法初始化。

就是说，为了尝试解决您的问题，我建议使用 native 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 和测试它的方法，所以我在脑海中打了这个字。