Responsiveness in iframes

Asked

Viewed 29 times

0

I am currently using this code to set the height of an iframe:

Iframe:

<iframe class="rastreamento" style="width: 100%; border: none;" src=">meutarget<" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>

Script:

<script>
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}

Only mobile does not work, it is smaller than it should be and as I disabled the scroll in style, it is impossible to view all content.

What’s the best way to solve this?

javascript html

  • Look, I would consider using a Bootstrap to do the most responsiveness , and in the gafs q there may be , use either the JS itself as you already do or the CSS msm!

1 answer

0


To make it responsive, use the event onresize in the object window sending the iframe to the function resizeIframe, just as you did in the attribute onload. Only instead of sending this, can select the iframe with document.querySelector.

This way, whenever the browser window changes size (in the case of mobile, when switching the orientation of the device) will be recalculated the height iframe:

window.onresize = function(){
   resizeIframe(document.querySelector("iframe"));
}

Browser other questions tagged javascript html

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