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

Question

Eg: Fetching text input value using jQuery $('#username').val();

I had tried this from this question

Here is my code

<div id="siteloader"></div>

$(window).load(function(){
    $("#siteloader").html('<object data="http://testk.shopnix.org/admin" />');
    setTimeout(function() {
      console.log($("#lemail_id"));
      $("#lemail_id").val("lemail_id");
      console.log($("#lemail_id").val());
    }, 10000)

})

JS fiddle here

Wendel

Answer 1

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

Amelioration

@KiranReddy I've written about it above, please be carefully – Amelioration

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "localhost" from accessing a cross-origin frame. – Wendel