Access external HTML page content of object tags

Question

I've searched an answer to this question but can't get a way how to do it.

I want to access the content of a div that I have included in an object tag.

My include.htm file:

<div id="includedDiv">This is the included page</div>

What I have tried :

<html>
<head>
<title>Get element from object included page</title>
</head>
<body>
<p>Test: This is the main page</p>
<object id="obj" data="include.htm"></object>
<script>
//alert(document.getElementById("includedDiv").firstChild.nodeValue);
//alert((document.getElementById("obj")).document.getElementById("includedDiv").firstChild.nodeValue);
alert(document.getElementById("obj")["includedDiv"]);
</script>
</body>
</html>

None of the alert prints me the message "This is the included page", is there a way to get this content from the DOM?

EDIT: window[0].document.getElementById("includedDiv").firstChild.nodeValue; was the the good answer for access through the DOM, object tag just creates another window :) http://www.w3schools.com/jsref/prop_win_length.asp

Possible clue, the content I want to access is on an external page, some people say object tag closes immediately, so there is no child to find stackoverflow.com/questions/1981191/… It seems possible to load content of an external HTML page with jQuery load method or using the native Javascript AJAX method XMLHttpRequest stackoverflow.com/questions/4728520/… — baptx
– baptx, Commented May 19, 2012 at 14:17
I don't understand why we would complicate things, the div content is loaded, we can see the message on the page so it should be somewhere, accessible through the DOM! — baptx
– baptx, Commented May 19, 2012 at 14:23
@baptx window[0].document.getElementById("includedDiv").firstChild.nodeValue; :) — baptx
– baptx, Commented May 25, 2012 at 12:33
Be advised that the ability to look into the <object> may be subject to same-origin policy. — Ulrich Schwarz
– Ulrich Schwarz, Commented May 25, 2012 at 12:56
that's not the point. You may find it doesn't work for ... data="http://somewhere.else.com" .... — Ulrich Schwarz
– Ulrich Schwarz, Commented May 25, 2012 at 13:38

chrki · Accepted Answer · 2016-08-05 18:48:24Z

0

Got it! Just use

window.parent.mainPageMethod(document.getElementById("includedDiv").firstChild.nodeValue);

in the included page and you can get div content in a Javascript function from the main page!

Thanks for trying to help Jay, I should admit that when you talked about window.name property it put me on the right direction :)

edited Aug 5, 2016 at 18:48

chrki

6,3436 gold badges39 silver badges60 bronze badges

answered May 25, 2012 at 10:47

baptx

4,0066 gold badges39 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

baptx Over a year ago

Working, but this is still a mystery for me: stackoverflow.com/questions/10665108/…

Community · Accepted Answer · 2017-05-23 11:51:38Z

0

document.getElementById('id').innerHTML or document.getElementById('id').outerHTML whichever you are looking for...

see how to append to a object with innerHTML

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered May 19, 2012 at 12:21

Jay

3,3751 gold badge30 silver badges40 bronze badges

9 Comments

baptx Over a year ago

I want to get the content of an HTML page included in the "object" tag, not the content of a simple div object. HTML object tag: w3schools.com/tags/tag_object.asp

baptx Over a year ago

Unfortunately your solution works if the div is on the same page but in my case it is not and alert(document.getElementById("obj").innerHTML); prints a blank message

Jay Over a year ago

What about if you get the div 'includedDiv' and use outerHTML?

Jay Over a year ago

Also if that won't work try this... when the page loads have a function modify the window.name property to the 'innerHTML' of the loaded content and then call a callback function... When that function is called you will have the content in window.name...

Jay Over a year ago

include.onload = function () { window.name = globalCallable(document.innerHTML.toString()); } outerpage.globalCallable(x) { return x; }

|

chrki · Accepted Answer · 2016-08-05 18:48:59Z

0

Even better answer: you CAN access object tag content through the DOM, it is just another window!

window[0].document.getElementById("includedDiv").firstChild.nodeValue;

That's it :D http://www.w3schools.com/jsref/prop_win_length.asp

edited Aug 5, 2016 at 18:48

chrki

6,3436 gold badges39 silver badges60 bronze badges

answered May 25, 2012 at 12:26

baptx

4,0066 gold badges39 silver badges46 bronze badges

2 Comments

Angus Over a year ago

hey, i'm trying to do the same thing but i get: TypeError: undefined is not an object (evaluating 'window[0].document'). Any idea?

baptx Over a year ago

@Miguel Sorry for the late reply, if it says window[0].document is undefined, it should mean that you don't have any frame (iframe or object) on the web page. Note that the frame should use the same domain for security reasons, otherwise you would get another error: stackoverflow.com/questions/7995223/…

Collectives™ on Stack Overflow

Access external HTML page content of object tags

3 Answers 3

1 Comment

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related