How to Maintain Mobile Self-adjusting Iframe?

Asked

Viewed 466 times

0

I need Help.

I always turn to help here when I need help in general, but I found no answer, and nothing that works.

I need to create a friendly address - index, which will call a very long page in a frame. the problem is that when I open only the full address, it self-adjusting perfectly, everything beautiful, but in the frame, it appears in full page.

Example of My Index - (which should not appear, is empty, invisible + Page Below.)

<html>
<head></head>
    <frame src="title.html">
    <frameset rows="0,*"BORDER=0 FRAMEBORDER=0 FRAMESPACING=0> 
        <frame src="menu.html">
        <frame src="https://www.restaurantlogin.com/ordering/restaurant/menu?company_uid=5ae31451-e048-4713-af53-3a1f9c5d738a">  
    </frameset>
</frameset>

The Link that is auto adjustable is as follows - https://www.restaurantlogin.com/ordering/restaurant/menu?company_uid=5ae31451-e048-4713-af53-3a1f9c5d738a

I’ve tried several adjustments.

java html android

  • Hj is not recommended to use the iframe tag.

1 answer

0

I don’t know what your real need is with the use of iframe, I can only anticipate that it’s really boring working with them.

There are many restrictions and problems arising from the use of iframe on pages.

The issue of size is a very common problem, especially if the iframe page works with rendering elements on the screen via Javascript/Jquery. Every time the internal page receives a size update the external page that has iframe would have to update the iframe size.

Another problem in the sizes is on the screen that has the iframe, if the user opens the page on the computer and changes the window size you will have to recalculate the iframe size.

Check if it is possible to make your solution without using iframe.

If you still want to work with iframes, follow the example based on your code using iframe to adjust the screen size.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        html, body {margin: 0; height: 100%; overflow: hidden}
    </style>
</head>
<body>
    <iframe id="content" src="https://www.restaurantlogin.com/ordering/restaurant/menu?company_uid=5ae31451-e048-4713-af53-3a1f9c5d738a">
        </iframe>
</body>
</html>

<script>
    window.onload = (event) => {
        var widthPage = document.getElementsByTagName('body')[0].clientWidth;
        var heightPage = document.getElementsByTagName('body')[0].clientHeight;

        document.getElementById('content').style.height = heightPage + "px";
        document.getElementById('content').style.width = widthPage + "px";
    };

</script>

  • Rafael, thanks for the comments, I’ll see if the code helps. Actually, the idea is simple, open this address there, embedded in my site. I will create a page with CMS and This will be listed several establishments that I support, so clicking will open the link, without however, need to be a button that the person has to click. Today, we click a button and the frame opens, the ideal is to click the link and send straight.... Thanks in advance, and tested the Code, I return here.

Browser other questions tagged java html android

You are not signed in. Login or sign up in order to post.