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/

Answers


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


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;

The innerHTML will provid access to the html which is in between the <object> and </object>. What is asked is how to get the html loaded by the object 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.


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>

Try this:

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

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!


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

UPDATED

I used this line of Javascript to change the value of a input filed inside an iFrame,

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

Reference: https://stackoverflow.com/a/14451440/3452102


Need Your Help

Check if all values of iterable are zero

python iterable

Is there a good, succinct/built-in way to see if all the values in an iterable are zeros? Right now I am using all() with a little list comprehension, but (to me) it seems like there should be a m...