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

Question

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

任何帮助是极大的赞赏。 谢谢。

Answer 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());

Answer 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'函数相同，后者是元素选择器 ， 而不是元素创建器 。 此代码var object = $("<object>")无效，因为页面上不存在CSS选择器<object>定位的<object> 。 我已将其更改为document.createElement("object") 。
由于object变量现在是DOM元素，因此我选择使用.setAttribute函数，这是一个本机DOM函数。
$("body").append(parentDiv)将正确地将parentDiv （及其子object ）DOM元素添加到body元素的末尾。 这允许$(object).addClass("object")正常运行。
contentDocument属性是iFrame元素专有的。 我已将属性更改为innerHTML。 警报框正确显示“你好，地球！” 这是object元素的内容。

在这里工作的JSFiddle演示。

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

问题描述

2 个解决方案

解决方案1
0 2015-07-07 12:48:41

解决方案2
0 2015-07-07 13:11:47

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

问题描述

2 个解决方案

解决方案1 0 2015-07-07 12:48:41

解决方案2 0 2015-07-07 13:11:47

解决方案1
0 2015-07-07 12:48:41

解决方案2
0 2015-07-07 13:11:47