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

Question

I've been searching for an answer for this problem for several hours and I can't seem to find any solutions that work. 我一直在寻找这个问题的答案几个小时，但似乎找不到有效的解决方案。 I have created a dynamic object tag using jquery and set its data to another page on my website. 我已经使用jquery创建了一个动态对象标签，并将其数据设置到我网站上的另一个页面。 I appended the object tag to a div and the div to the body of my page. 我将object标签附加到div上，并将div附加到页面的正文中。 What I want to do is access the html of the page that I set as the data of my object tag in order to monitor for changes on that page and update my current page based on those changes. 我要做的是访问设置为我的对象标签数据的页面的html，以便监视该页面上的更改并根据这些更改更新当前页面。 When defining the object tag in html, I can access its contents using the contentDocument property of the object tag but when generating the tag dynamically, contentDocument is undefined. 在html中定义对象标记时，我可以使用对象标记的contentDocument属性访问其内容，但是在动态生成标记时，未定义contentDocument。 I've also tried using the contents function of jquery but it returns an object of length 0. Here is basically what I've tried: 我也尝试过使用jquery的content函数，但是它返回长度为0的对象。基本上，这是我尝试过的内容：

This is the code for my page test.php: 这是我的页面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>

And this is the code for the page of the object data test.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>

Any help is greatly appreciated. 任何帮助是极大的赞赏。 Thank you. 谢谢。

Answer 1

At this moment, it is a jQuery object. 目前，它是一个jQuery对象。 So you need to define it: 因此，您需要定义它：

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

Or you can also use like: 或者您也可以使用像：

// 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

I think you have a number of HTML/Javascript concepts mixed up. 我认为您混合了许多HTML / Javascript概念。 I've corrected your code to at least have no errors: 我已将您的代码更正为至少没有错误：

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

The jQuery '$' function, the same as the 'jQuery' function, which is an element selector , not an element creator . jQuery'$'函数与jQuery'函数相同，后者是元素选择器 ， 而不是元素创建器 。 This code, var object = $("<object>") won't work because there does not exist an object on the page which is targeted by CSS selector <object> . 此代码var object = $("<object>")无效，因为页面上不存在CSS选择器<object>定位的<object> 。 I've changed that bit to document.createElement("object") instead. 我已将其更改为document.createElement("object") 。
As the object variable is now a DOM element, I've elected to use the .setAttribute function instead, which is a native DOM function. 由于object变量现在是DOM元素，因此我选择使用.setAttribute函数，这是一个本机DOM函数。
$("body").append(parentDiv) will correctly add the parentDiv (and its child object ) DOM element to the end of the body element. $("body").append(parentDiv)将正确地将parentDiv （及其子object ）DOM元素添加到body元素的末尾。 This allows $(object).addClass("object") to function properly. 这允许$(object).addClass("object")正常运行。
The contentDocument property is exclusive to the iFrame element . contentDocument属性是iFrame元素专有的。 I've changed the property to innerHTML instead. 我已将属性更改为innerHTML。 The alert box correctly displays "Hello, Earth!" 警报框正确显示“你好，地球！” which is the contents of the object element. 这是object元素的内容。

Working JSFiddle demo here. 在这里工作的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