iframe problem, it does not open at the top of the iframe/page.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hello

please look this 1 minute video so you can understand which is the problem

https://youtu.be/srFIsG6phZs

Some iframe called using a form opens in the middle or at the bottom of the page,
instead to open at the top of the page. How can avoid this problem and open the iframe at the top ?

Thank you

If the domain of iframe is the same as the domain of main site, you can fix the issue with a simple script. But can you alter the source code?
Stefano Balzarotti 10 days ago
yes I can alter the code of the iframe page I am opening.
graz68 10 days ago
awarded to Codeword

Crowdsource coding tasks.

3 Solutions


The issue is caused by wrong iframe size, you can fix the iframe size and also scroll the content when you load the page:

Add this script to the page:

 <script>
    function resizeIframe(obj) {
       obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
       window.top.scrollTo(0,0); 
       window.scrollTo(0,0);" 
    }
</script>

Add the onload event to call the script

 <iframe src="..." frameborder="0" onload="resizeIframe(this)" />

This script works only if the domain of main page is the same as domain of iframe or if cross domain origin is enabled.

The iframe name is myIframe and the url which is opening is asspdeluxemysql.php . I have no idea where should I add exactly your code above in asspdeluxemysql.php . Thank you
graz68 10 days ago
add the script part above the iframe. Add onload="resizeIframe(this)" to your iframe.
Stefano Balzarotti 10 days ago
just to clarify I can change the source of the page which has the "MYSQL SETUP" form button, and the page which is opening ... asspdeluxemysql.php . Where should I have to add your code , in which of these two pages exactly ?
graz68 10 days ago
neither one nor the other, both pages are frames. The code I provided is for the parent page that contains the iframe. The page with the code "<iframe src..." I can provide a code to put in the page asspdeluxemysql.php, but if you have other pages with same issue, you need to replicate the code.
Stefano Balzarotti 10 days ago
Winning solution

You can use javascript to do this and set the scroll-top value to 0 when the iframe content loads

Code example

<body>
     <iframe id="iframeId" src="your souce url" >
     </iframe>
     <script>
     var Iframe = document.getElementById('iframeId');
     Iframe.onload = function(){
          Iframe.contentWindow.scrollTo(0,0);
     };
     </script>
</body>
please can you be more detailed , which code exactly ?
graz68 10 days ago
Something like this.
Codeword 10 days ago
where and how should I add this code please ? Before ? in this way ? var Iframe = document.getElementById('iframeId'); Iframe.onload = function(){ Iframe.contentWindow.scrollTo(0,0); };
graz68 10 days ago
But remember the iframe must follow the same-origin policy of browser
Codeword 10 days ago
I tried the code above, the behaviour does not change . The iframe name is myIframe and the url is asspdeluxemysql.php . (p.s. how can I enter code here in bountify ?!)
graz68 10 days ago
assign the iframe an id as shown above and set the src="relative or absolute path to your php file"
Codeword 10 days ago
I did it , behaviour does not change.
graz68 10 days ago
or if you dont want to assign an id the just use <!-- give proper path to php file--> var Iframe = document.getElementsByName("myIframe"); Iframe.onload = function(){ Iframe.contentWindow.scrollTo(0,0); };
Codeword 10 days ago
If it still doen't solve the problem give the script so that I can modify it for you.Thank you
Codeword 10 days ago
ok, sending now.
graz68 10 days ago
just to clarify I can change the source of the page which has the "MYSQL SETUP" form button, and the page which is opening ... asspdeluxemysql.php . Where should I have to add your code , in which of these two pages exactly ?
graz68 10 days ago

Add this code in asspdeluxemysql.php:

<script>
    window.addEventListener("load", function(event) {
        window.scrollTo(0,0);
    });
</script>

you need to replicate this code in all pages with same issue.

thank you , but same behaviour
graz68 10 days ago
sorry, but I need to see your code to be able to detect the issue.
Stefano Balzarotti 10 days ago
View Timeline