Ajustez la largeur et la hauteur d'iframe en fonction de la taille de l'écran - jquery, html, css, fancybox

J'ai:

$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : "iframe.html",
type : "iframe",
padding : 5
});
});

<li><a class="fancybox fancybox.iframe" href="iframe.html">Iframe</a></li>

Cependant, j'aimerais ajuster la taille d'iframe en fonction de la taille de l'écran de l'utilisateur.

J'essayais quelque chose comme:

width = $(window).width() -80;
heigth= $(window).height() -80;

Est-ce correct?, Comment l'utiliser dans le code?

Réponses:

Alternativement, vous pouvez aussi essayer ceci ..

<script type="text/javascript">
$(document).ready(function () {
$("a.iframe").fancybox({
"width": 800,
"height": 500,
"transitionIn": "elastic",
"transitionOut": "elastic",
"type": "iframe"
});
});
</script>

Dakota du Nord

Essaye ça,

function ResizeIframe(iframe) {
var iframeBody = (iframe.contentDocument) ? iframe.contentDocument.body : iframe.contentWindow.document.body;
var height = (iframeBody.scrollHeight < iframeBody.offsetHeight) ? iframeBody.scrollHeight : iframeBody.offsetHeight;
height = height + 10;
$(iframe).height(height);
}

<iframe id="idFrm" src="URL" frameborder="0" clientidmode="Static" scrolling="no"                            height="35px" width="98%" onload="javascript:ResizeIframe(this);"></iframe>

Je l'ai utilisé et fonctionne comme un charme dans tous les navigateurs. Appelez-le à la charge de votre

Dakota du Nord