How to Get HTML Elements from an Object Tag

How to get html elements from an object tag?

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

how to access the elements of the HTML loaded in object tag?

1. Use event onload instead of timeout.
2. For access to object internal structure use method contents()
3. WARNING: It may doesn't work on jsfiddle. This site block XSS requests for security reasons.
   
   

HTML:

<div id="siteloader">
  <object id="object1" data="" />
</div>

JS:

$(function() {
  $("#object1").load(function() {
    $(this).contents().find("#lemail_id").val("lemail_id")
  });
  $("#object1").attr('data', 'http://testk.shopnix.org/admin');
});

js fiddle

Read data in HTML object tag

The object tag has to make a separate request to the server and then load that content. Meanwhile, your JavaScript has already executed and "misses the bus."

Run your code inside the onload event of the object.

Then use .contentDocument.body.childNodes[0].innerHTML to view the text file.

var object = document.getElementById("data");
object.onload = function() {
    var data = object.contentDocument.body.childNodes[0].innerHTML;
    // use the data
};

Access external HTML page content of object tags

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

How to get the ParentElement of Object Tag?

An SVG inside an object creates a nested browsing context.

To access elements outside this child document, you need to access the parent document:

function playVideo() {
  // ...
  var parentDoc = window.parent.document;
  var displayBox = parentDoc.getElementById('displaybox');
  // ...
}

A better way to display a webpage using object tag in another html without using jquery, just plain javascript

Use an object indexed by your cases, whose values are the appropriate string that comes right before the .html. For example:

const pageNamesById = {
  newMail: 'sendMail',
  inbox: 'inboxList',
  sent: 'sentList',
  draft: 'draftList',
  deleted: 'deletedList',
  retracted: 'retractedList',
  createGroup: 'createGroup',
  // etc
};
function dashbord(id) {
  const main = document.getElementById('main');
  const pageName = pageNamesById[id];
  if (pageName) {
    main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/' + pageName + '.html"></object>';
  }
}

---

Related Topics