How to get html elements from an object tag?

Question

I'm using the object tag to load an html snippet within an html page.

My code looks something along these lines:

<HTML>
  <object data="/html_template"></object>
</html>

As expected after the page is loaded some elements are added between the object tags. I want to get those elements but I can't seem to access them.

I've tried the following

$("object").html()  
$("object").children()
$("object")[0].innerHTML

None of these seem to work. Is there another way to get those elements?

EDIT:

A more detailed example:

consider this

<HTML>
  <object data="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US"></object>
</html>

If I try to get the html within the object I get an empty string.

http://jsfiddle.net/wwrbJ/1/

Yes $("object") returns something. And come on I'm not using IE — Noam, Jan 10 '12 at 05:34

score 22 · Answer 1 · edited Jul 28 '22 at 22:49

As long as you place it on the same domain you can do the following:

HTML

<html>
    <object id="t" data="/html_template" type="text/html">
    </object>
</html>

JavaScript

var t=document.querySelector("#t");
var htmlDocument= t.contentDocument;

Since the question is slightly unclear about whether it is also about elements, not just about the whole innerHTML: you can show element values that you know or guess with:

console.log(htmlDocument.data);

score 11 · Answer 2 · edited Jul 28 '22 at 22:57

11

The innerHTML will provide access to the html which is in between the <object> and </object>. What is asked is how to get the html that was loaded by the object and inside the window/frame that it is producing (it has nothing to do with the code between the open and close tags).

I'm also looking for an answer to this and I'm afraid there is none. If I find one, I'll come back and post it here, but I'm looking (and not alone) for a lot of time now.

edited Jul 28 '22 at 22:57

questionto42

7,175
4
57
90

answered May 04 '12 at 13:38

georgosn

119
1
3

Would not say that. The question asks for elements between the object tags. Does not sound like the exact html of the frontend, the OP just wants to know all of the elements that are in there and tries the innerHTML only to get a sort of parent of those elements. It is not even clear whether the OP knows the element names in advance, but it is likely. And then this answer would be plain wrong. Downvote. – questionto42 Jul 28 '22 at 23:00

score 4 · Accepted Answer · answered Oct 02 '17 at 14:03

4

No , it's not possible to get access to a cross-origin frame !

answered Oct 02 '17 at 14:03

AHmedRef

2,555
12
43
75

Downvote. The highly upvoted answer works (tested). This should get un-accepted. – questionto42 Jul 28 '22 at 22:51

score 3 · Answer 4 · answered Apr 27 '18 at 09:09

I know this is an old question, but here goes ...

I used this on a personal website and eventually implemented it in some work projects, but this is how I hook into an svg's dom. Note that you need to run this after the object tag has loaded (so you can trigger it with an onload function). It may require adaptation for non-svg elements.

function hooksvg(elementID) { //Hook in the contentDocument of the svg so we can fire its internal scripts
   var svgdoc, svgwin, returnvalue = false;
   var object = (typeof elementID === 'string' ? document.getElementById(elementID) : elementID);
   if (object && object.contentDocument) {
      svgdoc = object.contentDocument;
   }
   else {
      if (typeof object.getSVGDocument == _f) {
         try {
            svgdoc = object.getSVGDocument();
         } catch (exception) {
            //console.log('Neither the HTMLObjectElement nor the GetSVGDocument interface are implemented');
         }
      }
   }
   if (svgdoc && svgdoc.defaultView) {
      svgwin = svgdoc.defaultView;
   }
   else if (object.window) {
      svgwin = object.window;
   }
   else {
      if (typeof object.getWindow == _f) {
         try {
            svgwin = object.getWindow();//TODO look at fixing this 
         }
         catch (exception) {
            // console.log('The DocumentView interface is not supported\r\n Non-W3C methods of obtaining "window" also failed');
         }
      }
   }
   //console.log('svgdoc is ' + svgdoc + ' and svgwin is ' + svgwin);
   if (typeof svgwin === _u || typeof svgwin === null) {
      returnvalue = null;
   } else {
      returnvalue = svgwin;
   }
   return returnvalue;
};

If you wanted to grab the symbol elements from the dom for the svg, your onload function could look like this:

function loadedsvg(){
   var svg = hooksvg('mysvgid');
   var symbols = svg.document.getElementsByTagName('symbol');
}

Do you take the `document.getElementById(elementID)` in order to check for string with `typeof elementID === 'string'` before running the function? Or is there another reason why you do not take the `document.querySelector()` function of the highest voted answer, but the `document.getElementById()` function? — questionto42, Jul 28 '22 at 23:05
@questionto42standswithUkraine - I'm explicitly passing in the string id of the element in my example. You could of course pass in a different type of selector if you wanted to, as long as it returns the appropriate object, since the parameter used for the id checks whether it's a string or not. The example wasn't intended to be a generic answer, given there are many approaches you can take. — Rexx Magnus, Jul 29 '22 at 09:18

score 2 · Answer 5 · edited Jan 29 '15 at 02:58

2

Try this:

// wait until object loads
$('object').load(function() {
    // find the element needed
    page = $('object').contents().find('div');
    // alert to check
    alert(page.html());
});

edited Jan 29 '15 at 02:58

SirPython

647
6
19

answered Jan 10 '12 at 05:18

Mandeep Pasbola

2,631
2
26
50

$('object').contents() returns [] for me – Noam Jan 10 '12 at 05:35
$('object').contents() is a collection, you have to search for an element inside that object – Mandeep Pasbola Jan 10 '12 at 05:41
1

try to use : $('object').contents().find('html').html(); – Mandeep Pasbola Jan 10 '12 at 05:47
getting null, check the edit I made above, even if I add setTimeout around js still can't get the html inside – Noam Jan 10 '12 at 06:56
getting null because there is no html inside object tag in your edit. – Mandeep Pasbola Jan 10 '12 at 07:16

shabbir.rang · Answer 6 · 2016-08-17T07:55:04.457

1

You could use the following code to read object data once its loaded completely and is of the same domain:

HTML-

<html>
<div class="main">
<object data="/html_template">
</object>
</div>
</html>

Jquery-

$('.main object').load(function() {
    var obj = $('.main object')[0].contentDocument.children;
    console.log(obj);
});

Hope this helps!

edited Aug 17 '16 at 07:55

answered Aug 17 '16 at 07:12

shabbir.rang

279
2
4
24

score -2 · Answer 7 · edited Jul 28 '22 at 22:43

-2

UPDATED

I used this line of Javascript to change the value of a input filed inside an iFrame, taken from How to pick element inside iframe using document.getElementById:

document.getElementById('iframeID').contentWindow.document.getElementById('inputID').value = 'Your Value';

In your case, since you do not have a frame, and since you want to get and not set the value, log it for example with:

console.log(document.getElementById('object').value);

And if you guess or choose an element:

console.log(document.getElementById('object').data);

edited Jul 28 '22 at 22:43

questionto42

7,175
4
57
90

answered Jul 24 '17 at 08:51

Praneeth Nidarshan

1,704
15
21

The question was about how you get the values of the elements inside the tag, not about how you inject a value into the tag element. Instead of `.value = 'Your Value';` you would want to write `console.log(...'inputID').value)`. And that would answer the question. Besides that, this is not about a frame. Anyway, though I only tested the `document.querySelector()` function of the highest voted answer, yours should likely work as well as in the link. Edited and upvoted. – questionto42 Jul 28 '22 at 22:40

score -2 · Answer 8 · answered Jan 10 '12 at 05:25

-2

Here goes a sample piece of code which works. Not sure what the problem is with your code.

<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
            var k = $("object")[0].innerHTML;
            alert(k);
            $("object")[0].innerHTML = "testing";
        });
 </script>
<object data="/html_template">hi</object>
</html>

answered Jan 10 '12 at 05:25

rAm

1,086
2
16
23

1

The question is around accessing HTML content that gets dynamically generated within an object tag. It doesn't ask for content that's statically placed inside an object tag. – Ritwik Sen Jun 11 '22 at 05:11
Downvote as well. As a beginner, I read it as such: it does not help solving the answer since the javascript would have to be after the html object tag instead, and then asking for what is in that tag. Here, the javascript is before the tag, injecting "testing" as the innerHTML into the tag. Good idea, but blurring the sight regarding the question. – questionto42 Jul 28 '22 at 22:25

How to get html elements from an object tag?

8 Answers8

Linked

Related