Search code examples
javascriptjqueryhtmlhtml-object

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


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


Solution

    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