How can I access the content of a dynamically created object tag in 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. I appended the object tag to a div and the div to the body of my page. 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. 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. 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:
This is the code for my page 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:
<!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.
2 answers
solution1
0 2015-07-07 12:48:41
At this moment, it is a jQuery object. 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());
solution2
0 2015-07-07 13:11:47
I think you have a number of HTML/Javascript concepts mixed up. 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 . 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>. I've changed that bit todocument.createElement("object")instead. - As the
objectvariable is now a DOM element, I've elected to use the.setAttributefunction instead, which is a native DOM function. -
$("body").append(parentDiv)will correctly add theparentDiv(and its childobject) DOM element to the end of thebodyelement. This allows$(object).addClass("object")to function properly. - The
contentDocumentproperty is exclusive to the iFrame element . I've changed the property to innerHTML instead. The alert box correctly displays "Hello, Earth!" which is the contents of theobjectelement.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.