CODEWITHSUNDEEP
javascriptjqueryhtml
Noam
Noam

Reputation: 479

How to get html elements from an object tag?

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/

Upvotes: 30

Views: 82286

Answers (8)

georgosn
georgosn

Reputation: 119

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.

Upvotes: 11

blabla
blabla

Reputation: 221

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

Upvotes: 22

Praneeth Nidarshan
Praneeth Nidarshan

Reputation: 1704

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

Upvotes: -2

user1649304
user1649304

Reputation:

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

Upvotes: 3

AHmedRef
AHmedRef

Reputation: 2621

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

Upvotes: 5

shabbir.rang
shabbir.rang

Reputation: 279

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!

Upvotes: 1

Mandeep Pasbola
Mandeep Pasbola

Reputation: 2639

Try this:

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

Upvotes: 2

rAm
rAm

Reputation: 1106

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>

Upvotes: -2

Related Questions