Home/ Questions/Q 7792287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T22:08:19+00:00

How can I: Wait for an external iFrame to load Resize externally sourced iFrame

  • 0

How can I:

  1. Wait for an external iFrame to load
  2. Resize externally sourced iFrame (ex: 100px x 40px)
  3. Offset externally sourced iFrame (ex: 25px x 50px)

Sample code:

<html>
<body>
    <p>Here's Google's Logo Today:</p>
    <iframe id="google_logo" src="http://www.google.com/search?q=stackoverflow"></iframe>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {});
    </script>
</body>
</html>

I know you can’t get contents of external iFrame, but what about resizing and offsetting?

I also know my example is ridiculous.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t fire an event when an external iframe has fully loaded, the rest is possible though.

    Wrap the frame in a div

    <div id="frame_wrapper">
  <iframe id="google_logo" src="http://www.google.com/search?q=stackoverflow"></iframe>
</div>

    Add the following jQuery

    $(document).ready(function() {
  $("#frame_wrapper").addClass("iframe_shift");
});

    Add the following CSS

    #google_logo { width: 100%; height: 100%; }
.iframe_shift { width:100px; height: 45px; position: relative; top: 25px; left: 45px;  }​
    • 0