jquery change de cadre

Dans le développement front-end, iframe est une balise très courante qui nous permet d'intégrer d'autres pages dans une seule page. Cependant, dans certains cas, nous devons charger un contenu différent dans l'iframe ou effectuer certaines actions spécifiques. Dans ces cas, nous pouvons utiliser jQuery pour modifier et manipuler le contenu de l'iframe.

1. Obtenir l'objet iframe

Pour modifier ou manipuler le contenu de l'iframe, vous devez d'abord obtenir l'objet iframe. Vous pouvez utiliser le sélecteur de jQuery pour obtenir l'objet iframe. Par exemple, supposons que nous ayons l'iframe suivante :

Nous pouvons l'obtenir via le code suivant Objet :

var myFrame = $('#myFrame')[0].contentWindow;

où, myFrame est l'objet iframe.

2. Obtenir des éléments dans iframe

Après avoir obtenu l'objet iframe, nous pouvons trouver et obtenir les éléments qui doivent être modifiés ou manipulés. Il existe deux manières d'obtenir cette fonctionnalité.

La première méthode consiste à obtenir l'objet document dans l'iframe via l'attribut contentDocument, puis vous pourrez y trouver des éléments. Par exemple :

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame.contentDocument;
var element = $(content).find('#myElement');

where, myElement C'est l'ID de l'élément qui doit être exploité.

Une autre façon consiste à rechercher l'élément directement dans l'objet de l'iframe. Par exemple :

var myFrame = $('#myFrame')[0].contentWindow;
var element = $(myFrame.document).find('#myElement');

Les deux méthodes peuvent obtenir le contenu dans iframe L'élément à utiliser dépend des besoins spécifiques.

3. Modifier le contenu dans l'iframe

Après avoir obtenu les éléments dans l'iframe, nous pouvons modifier leur contenu via les méthodes associées de jQuery.

Par exemple, si nous voulons changer le titre dans l'iframe, nous pouvons faire ceci :

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame.contentDocument;
$( content).find ('title').text('New Title');

Parmi eux, le titre est l'élément qui doit être modifié. La méthode $().text() peut modifier le contenu du texte dans l'élément.

De même, si nous voulons changer l'image dans l'iframe, nous pouvons faire ceci :

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame.contentDocument;
$(content ).find ('#myImage').attr('src', 'newimage.jpg');

Parmi eux, myImage est l'ID de l'image qui doit être modifiée. La méthode $().attr() peut modifier la valeur d'attribut d'un élément.

4. Effectuer des opérations dans iframe

En plus de modifier le contenu dans iframe, nous pouvons également effectuer certaines opérations spéciales dans iframe. Par exemple, si nous voulons afficher du contenu dans une iframe, nous pouvons faire ceci :

var myFrame = $('#myFrame')[0].contentWindow;
var content = myFrame.contentDocument;
$(content) .find( 'body').append('

Some text

');

Parmi eux, body est l'élément auquel du contenu doit être ajouté. La méthode $().append() ajoute un nouveau contenu à la fin de l'élément.

De plus, nous pouvons également utiliser JavaScript dans iframe pour effectuer certaines opérations. Par exemple, si nous voulons faire apparaître une boîte de dialogue dans une iframe, nous pouvons faire ceci :

var myFrame = $('#myFrame')[0].contentWindow;
myFrame.alert('Hello, world!' );

Parmi eux, alert() est une fonction intégrée de JavaScript, utilisée pour faire apparaître une boîte de dialogue. Ici, nous l'appelons directement dans l'objet de l'iframe.

Résumé

Avec la méthode ci-dessus, nous pouvons facilement manipuler et modifier le contenu de l'iframe. Il convient de noter que lorsque vous utilisez jQuery pour faire fonctionner iframe, vous devez faire attention aux problèmes inter-domaines, sinon vous risquez de rencontrer des restrictions CORS (Cross-Origin Resource Sharing). Si vous devez utiliser l'iframe dans une situation inter-domaines, vous pouvez utiliser la méthode postMessage pour y parvenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!