contenu Web intégré jsp - iframe

Auteur：Eve Cole Date de mise à jour：2009-07-03 16:53:45

ZZzzz~ peut enrouler

<Iframe src="/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src : Le chemin du fichier, qui peut être un fichier HTML, texte, ASP, etc. ;
width, height : la largeur et la hauteur de la zone « image dans l’image » ;
défilement : Lorsque le fichier HTML spécifié de SRC n'est pas affiché dans la zone spécifiée, l'option de défilement, si elle est définie sur NON, la barre de défilement n'apparaîtra pas si elle est Auto : la barre de défilement apparaîtra automatiquement si elle est Oui ; il sera affiché ;
frameborder : La largeur de la bordure de la zone afin de mélanger "l'image dans l'image" avec le contenu adjacent, elle est souvent définie sur 0.

Par exemple :

Entre fenêtre et flottant frame Dans le langage de script et la hiérarchie des objets, la fenêtre contenant l'Iframe est appelée formulaire parent et le cadre flottant est appelé formulaire enfant. Il est important de clarifier la relation entre les deux, car il est nécessaire de contrôler l'Iframe dans. le formulaire parent Lorsque vous accédez à un sous-formulaire ou vice versa, vous devez connaître la hiérarchie des objets avant de pouvoir accéder et contrôler le formulaire via un programme.

1. Accédez et contrôlez les objets du sous-formulaire dans le formulaire parent. Dans le formulaire parent, l'Iframe, c'est-à-dire le sous-formulaire, est un objet enfant de l'objet document. Vous pouvez accéder directement aux objets du sous-formulaire dans le script. .
Maintenant, il y a une question, c'est-à-dire comment contrôler cet Iframe ? Ici, nous devons parler de l'objet Iframe. Lorsque nous définissons l'attribut ID sur cette balise, nous pouvons effectuer une série de contrôles sur le HTML contenu dans l'Iframe via le DOM Document Object Model.

Par exemple, intégrez le fichier test.htm dans example.htm et contrôlez certains objets balises dans test.htm :
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
Le code du fichier test.htm est :
<html>
<corps>
<h1 id="myH1">Bonjour, mon garçon</h1>
</corps>
</html>
Si nous voulons changer le texte de la balise H1 avec le numéro d'identification myH1 en bonjour, ma chère, nous pouvons utiliser :
document.myH1.innerText="bonjour, mon cher" (le document peut être omis)
Dans le fichier example.htm, le sous-formulaire pointé par l'objet Iframe mark est cohérent avec le modèle objet DHTML général et la méthode de contrôle d'accès aux objets est la même, je n'entrerai donc pas dans les détails.

2. Accédez et contrôlez les objets du formulaire parent dans le formulaire enfant. Dans le formulaire enfant, nous pouvons accéder aux objets de la fenêtre parent via son objet parent (parent).
Tel que exemple.htm :
<html>
<body onclick="alert(tt.myH1.innerHTML)"> <Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"> </iframe>
<h1 id="myH2">bonjour, ma femme</h1>
</corps>
</html>
Si nous voulons accéder au texte du titre dans frame1.htm avec le numéro d'identification myH2 et le changer en "bonjour, mon ami", nous pouvons écrire comme ceci :
parent.myH2.innerText="bonjour, mon ami"
Ici l'objet parent représente le formulaire courant (le formulaire où se trouve exemple.htm). Pour accéder aux objets du formulaire parent dans le formulaire enfant, sans exception, cela se fait via l'objet parent.

Bien qu'Iframe soit intégré dans un autre fichier HTML, il reste relativement indépendant et constitue un « royaume indépendant ». Les caractéristiques d'un seul HTML s'appliquent également aux frames flottants.

Imaginez simplement, grâce à la balise Iframe, nous pouvons exprimer le contenu inchangé sous forme d'Iframe, de cette façon, nous n'avons pas besoin d'écrire le même contenu à plusieurs reprises. C'est un peu comme un processus ou une fonction en programmation, et c'est fastidieux. le travail manuel est économisé ! De plus, et surtout, cela rend les modifications de page plus réalisables, car au lieu de devoir modifier chaque page pour ajuster la mise en page, il vous suffit de modifier la mise en page d'un formulaire parent.
Il est à noter que les versions antérieures à Nestscape 6.0 ne prennent pas en charge la balise Iframe.

Exemple :

< IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no
name=main src="/bgm/bgm.html" width=300></IFRAME>

Après avoir utilisé iframe, j'ai trouvé que la barre de défilement n'est pas belle et je souhaite utiliser 2 images à la place↑↓
Comment y parvenir ?

répondre:
Remplacez <title>..</title> de la page web par le code suivant
<LANGUE DU SCRIPT="javascript">
fonctionscroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop+temp;
si (temp==0) retour ;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<LARGEUR TABLE="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="largeur:100%; hauteur:100;débordement: caché ;border-style:dashed;border-width:
1px,1px,1px,1px;">
texte<BR> texte<BR>
Texte<BR>
Texte<BR>
Mot
<BR>
<BR>
</DIV>
</TD>
< TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouseover="scroll(-1)" onmouseout="scroll(0) " onmousedown="scroll (-3)" BORDER="0" ALT="Appuyer sur la souris le rendra plus rapide "></TD> !
</TR>
<TR>
< TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER= "0" WIDTH ="15" HEIGHT="21" ALT="Appuyez sur la souris pour accélérer !"></TD>
</TR>
</TABLE>

Le code suivant peut implémenter la hauteur adaptative IFrame, c'est-à-dire qu'il s'adapte automatiquement à la longueur de la page pour éviter que des barres de défilement n'apparaissent sur la page et IFrame en même temps.
Le code source est le suivant

//Entrez une liste de noms d'iframe dont vous souhaitez ajuster automatiquement la hauteur en fonction de la hauteur de la page
// Séparez l'ID de chaque iframe par une virgule. Par exemple : ["myframe1", "myframe2"], il ne peut y avoir qu'un seul formulaire, donc aucune virgule n'est nécessaire.

//Définit l'ID de l'iframe
var iframeids=["test"]

//Si le navigateur de l'utilisateur ne prend pas en charge l'iframe, s'il faut masquer l'iframe, oui signifie caché, non signifie non caché
var iframehide="oui"

fonction dyniframesize()
{
var dyniframe=nouveau tableau()
pour (i=0; i<iframeids.length; i++)
{
si (document.getElementById)
{
// Ajuster automatiquement la hauteur de l'iframe
dyniframe[dyniframe.length] = document.getElementById(iframeids);
si (dyniframe && !window.opera)
{
dyniframe.style.display="bloc"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //Si le navigateur de l'utilisateur est NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //Si le navigateur de l'utilisateur est IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//Selon les paramètres définis, gérer les problèmes d'affichage des navigateurs ne prenant pas en charge l'iframe
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="bloc"
}
}
}

si (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
sinon si (window.attachEvent)
window.attachEvent("onload", dyniframesize)
autre
window.onload=dyniframesize
</script>

Autres URL avec valeur de référence :
http://www.webshu.com/tutorial/tor/7,id=0408.htm //Utilisation de l'iframe intégré dans les pages Web
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //Objet IFRAME
http://www.hoyo.idv.tw/web-program/html/iframe.htm //iframe de cadre en ligne