如何在 jquery 中访问动态创建的对象标签的内容？答案

【问题标题】：How can I access the content of a dynamically created object tag in jquery?如何在 jquery 中访问动态创建的对象标签的内容？
【发布时间】：2015-09-24 23:02:52
【问题描述】：

我已经为这个问题寻找了几个小时的答案，但我似乎找不到任何有效的解决方案。我使用 jquery 创建了一个动态对象标记，并将其数据设置到我网站上的另一个页面。我将对象标记附加到 div 并将 div 附加到页面的正文。我想要做的是访问我设置为我的对象标记数据的页面的 html，以便监视该页面上的更改并根据这些更改更新我的当前页面。在 html 中定义对象标签时，我可以使用对象标签的 contentDocument 属性访问其内容，但是在动态生成标签时，contentDocument 是未定义的。我也尝试过使用 jquery 的内容函数，但它返回一个长度为 0 的对象。这基本上是我尝试过的：

这是我的页面 test.php 的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript">
        function test()
        {
            var parentDiv = document.createElement("div");
            $(parentDiv).addClass("parentDiv");
            var object = $("<object>");
            $(object).attr("id","objectId");

            $(parentDiv).append(object);

            $("body").append(parentDiv);
            $(object).attr("data","test2.html");
            $(object).addClass("object");

            // These give errors
            var content = object.contentDocument;
            alert(content.getElementById("div"));
            var content = $(object).contents();
            alert(content.length());

            /* THIS WORKS IF object defined as a tag in HTML body

            var content = document.getElementById("objectId").contentDocument;
            alert(content.getElementById("div").innerHTML);
            */
        }
    </script>   
</head>
<body onload="test()">
<!-- <object id="objectId" data="test2.html"></object> -->
</body>
</html>

这是对象数据test.html页面的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test 2</title>
</head>
<body>
   <div id="div" style="width:200px;height:200px;background-color:red">
       DIV Contents
    </div>
</body>
</html>

非常感谢任何帮助。谢谢。

【问题讨论】：

你为什么需要那个？点击事件等？
object标签中我需要的页面就像一个警报监视器，会不断变化。我需要能够看到何时有警报，并在警报发生时在我的页面上执行一些操作。

标签： javascript jquery html

【解决方案1】：

此时，它是一个 jQuery 对象。所以你需要定义它：

// Replace it like this:
var content = document.getElementById("objectId").contentDocument;
var content = object.contentDocument;
alert(content.getElementById("div"));
var content = $(object).contents();
alert(content.length());

或者你也可以这样使用：

// Replace it like this:
var content = $("#objectId").get(0).contentDocument;
var content = object.contentDocument;
alert(content.getElementById("div"));
var content = $(object).contents();
alert(content.length());

【讨论】：

感谢您的回复普拉文。不幸的是，它仍然在 Chrome 中给出相同的错误：Uncaught TypeError: Cannot read property 'getElementById' of undefined
没有办法访问动态创建的对象标签的内容吗？
我的意思是，这是完全错误的！你想做什么？
同样使用content.find("div");。
不幸的是还是同样的错误。页面 test2.html 的内容显示在我的页面上，但 object.contentDocument 在尝试访问外部页面上的元素时返回 undefined。如果标签不是动态创建的，它就可以工作。

【解决方案2】：

我认为您混淆了许多 HTML/Javascript 概念。我已将您的代码更正为至少没有错误：

var parentDiv = document.createElement("div");
$(parentDiv).addClass("parentDiv");
var object = document.createElement("object");
object.setAttribute("id", "objectId");
object.innerHTML = "Hello, Earth!";

$(parentDiv).append(object);

$("body").append(parentDiv);
object.setAttribute("data", "test2.html");
$(object).addClass("object");

var content = document.getElementById("objectId");
alert(content.innerHTML);

jQuery '$' 函数，与'jQuery' function, which is an element selector 相同，不是元素创建者。这段代码 var object = $("<object>") 将不起作用，因为页面上不存在 CSS 选择器 <object> 所针对的对象。我已将该位更改为 document.createElement("object")。
由于 object 变量现在是一个 DOM 元素，我选择使用 .setAttribute 函数，它是一个原生 DOM 函数。
$("body").append(parentDiv) 将正确地将 parentDiv（及其子 object）DOM 元素添加到 body 元素的末尾。这允许$(object).addClass("object") 正常运行。
contentDocument 属性是 iFrame element 独有的。我已将属性更改为 innerHTML。警报框正确显示“你好，地球！”这是object 元素的内容。

Working JSFiddle demo here.

【讨论】：

感谢您的回复分析。但问题不在于访问对象标签的内部 html。我想访问页面上加载到对象变量中的元素（test2.html 上的元素）。如果我直接在我的正文中定义对象标记（而不是动态附加它），则 contentDocument 属性可以正常工作。如果像您一样动态创建对象变量，难道不应该有一种方法可以访问对象标签的数据页面的元素吗？
你见过吗：stackoverflow.com/questions/676705/…