javascript - jquery ajax - resize of iframe of another page

Question

I am just beginner with ajax and jquery but I am trying to achieve this:

1. Page installation.html contains iframe with id="MyIframe" and src="step1.php"
2. Page step1.php contains button that calls step2.php using ajax (successfully)
3. Page step2.php need to has script, that will resize iframe of page installation.html (so the content of step2 will fit in)

So far , my script looks like this:

    <script>
    $(document).ready(function() {
        $.ajax({
            url: 'installation.html',
            type: 'get',
            success: function(data) {
                $(data).find('#MyIframe').height('1000px');
            },
        });
    });
    </script>

But it doesn't work. Can you suggest a solution here? Thank you.

Answer 1

By default jQuery uses document of current window as context - in your case it is #MyIframe. In this context there is no element with #MyIframe id. So you need to access your iframe from the top window's document:

<script>
$(document).ready(function() {
    $(window.top.document).find('#MyIframe').height('1000px');
});
</script>

Answer 2

From what I see, your code is not reflecting what you are trying to achieve at all. The description you gave suggest you have the following structure.

installation.html

<iframe id="MyIframe" src="step1.php"></iframe>

step1.php

   button.click -> ajax GET step2.php -> resize #MyIframe

It's unclear to me why you load the step2.php page using ajax, can't you just change the src attribute of #MyIframe to step2.php and then resize the frame?

in step1.php

<button id="next">Next</button>

<script>
    $('#next').click(function () {
        $('#MyIframe', window.top.document).attr('src', 'step2.php').height(1000);
    });
</script>

If you need to POST values to step2.php, you could submit a form from step1.php instead of changing the src attribute of the iframe and use the same technique in step2.php to resize the top-level iframe.