CODEWITHSUNDEEP
javascriptjqueryiframe
RoyHB
RoyHB

Reputation: 1725

jquery get offset() of element in iframe

I need to fetch the offset info for a submit button that is buried deep within an iframe in a div. I want to position another element adjacent to the submit button after the iframe is loaded. The iframe is loaded from the same origin as the containing page.

<div id="editBox">
  <iframe id="ifr" src="mysource">
      <html>
        <head></head>
          <body>
            <form id="dataForm" enctype="" method="POST" action="">
              <div>
                <table>  some form elements </table>
                <button id="submitButton" onclick="" type="submit">Save to file</button>

I've tried 

$('#editBox').contents().find('#submitButton').offset();

and

$('#ifr').contents().find('#submitButton').offset()

But both return undefined.

I've also wrapped the .contents statements in a setTimeout to determine if the problem is that I'm checking before the iframe is loaded. (if that had worked I'd add a loaded event handler), but no change, result still undefined.

How can I get the position info I need?

Upvotes: 0

Views: 2750

Answers (1)

Sean Kendle
Sean Kendle

Reputation: 3629

Wrap your code in a load() function for the iframe. This works just like the document ready function, or window load function:

$("#ifr").on("load", function(){
    var offset = $(this).contents().find('#submitButton').offset();
});

Upvotes: 1

Related Questions