2010-02-02 3 views
7

Comment faire pour que mon iframe remplisse la fenêtre et n'affiche aucune barre de défilement?Remplir la fenêtre avec iFrame et ne pas afficher les barres de défilement?

Cela fonctionne pour IE6, je voudrais le faire fonctionner pour tous les navigateurs, si possible:

<iframe name=iframe1 src="theSiteToShow.html" width="100%" height="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe> 
<script type="text/javascript"> 
function resizeIframe() { 
    var height = document.documentElement.clientHeight; 
    height -= document.getElementById('frame').offsetTop; 

    // not sure how to get this dynamically 
    height -= 20; /* whatever you set your body bottom margin/padding to be */ 

    document.getElementById('frame').style.height = height +"px"; 

}; 
document.getElementById('frame').onload = resizeIframe; 
window.onresize = resizeIframe; 
</script> 
+0

Utilisez un 'jeu de cadres'. ;) – graphicdivine

Répondre

19

Vous devriez être en mesure de le faire en utilisant le CSS uniquement, sans aucun besoin de javascript. Les œuvres suivantes pour moi dans IE6 +, Google Chrome et Safari:

<style type="text/css"> 
body { 
    margin: 0; 
    overflow: hidden; 
} 
#iframe1 { 
    position:absolute; 
    left: 0px; 
    width: 100%; 
    top: 0px; 
    height: 100%; 
} 
</style> 

<iframe id="iframe1" name="iframe1" frameborder="0" 
    src="theSiteToShow.html"></iframe> 

Vos marges de cadre doivent être définies dans le corps de theSiteToShow.html.

MISE À JOUR
Suite à votre commentaire, j'ai utilisé ce qui suit comme une page de test:

<html> 
<head> 
<style type="text/css"> 
body { 
    margin: 0; 
    overflow: hidden; 
} 
#iframe1 { 
    position:absolute; 
    left: 0px; 
    width: 100%; 
    top: 0px; 
    height: 100%; 
} 
</style> 
</head> 
<body> 
<iframe id="iframe1" src="http://stackoverflow.com" frameborder="0"></iframe> 
</body> 
</html> 

Testé dans IE6 +, Chrome, Safari et Firefox, il fonctionne très bien et remplit toute la fenêtre.

+0

L'iframe ne remplira pas la fenêtre. Il se placera à 0,0 dans le coin supérieur gauche et sera d'environ 300x150px. Qu'est-ce qui manque? On dirait que ça devrait remplir la fenêtre. – Zolomon

+0

@Zolomon: Mon code fonctionne bien pour moi dans IE, Firefox et Chrome. Peut-être que vous pourriez copier le code de test que j'ai écrit et l'utiliser comme base pour construire votre propre code? –

+0

Merci, vos exemples fonctionnent! Je ne sais pas ce qui n'allait pas avec le mien. – Zolomon

0

J'avais les mêmes problèmes avec les barres de défilement ainsi que le menu sans contexte apparaissant, même si tous ces éléments avaient été désactivés. Après quelques jours d'essayer de les résoudre, je suis tombé sur ce post, ce qui m'a un peu aidé, mais m'a conduit à trouver un post sur les webplayers flexibles avec trois exemples de code. Here're les liens:

http://virtualplayground.d2.pl/?p=367#comment-224

Download package

Utilisez le fichier d'index si vous voulez une feuille vierge pour travailler à partir, remplacer votre code existant dans votre fichier .html exporté (à l'export unité), remplacez le lien 'unityObject.embedUnity' par votre propre lien vers votre fichier .html situé sur votre serveur.

Pour intégrer le lecteur dans votre page à l'aide d'un add iframe:

Lock et la charge.

Espérons que cela aide.

^_^

Questions connexes