jquery change de cadre

Avec le développement du développement front-end, jQuery est devenu une technologie incontournable pour la majorité des développeurs front-end. Parmi eux, la technologie de modification du cadre via jQuery est de plus en plus largement utilisée. Cet article explique comment utiliser jQuery pour modifier le cadre.

1. Qu'est-ce que le cadre

Dans le développement Web, le cadre fait référence au cadre, également appelé formulaire. Il s'agit d'une technologie HTML qui divise une page en plusieurs vues, permettant aux développeurs d'afficher simultanément plusieurs documents HTML indépendants sur la même page. Les cadres peuvent être divisés en deux types, l’un est un jeu de cadres horizontal et l’autre est un jeu de cadres vertical. Comme le montre la figure ci-dessous :

2. Comment jQuery modifie le cadre

Il existe deux façons de modifier le cadre via jQuery :

1. Faites fonctionner le cadre enfant via le JS de la page parent

Obtenez l'objet du cadre enfant via JS sur la page parent, puis utilisez le ID ou nom du cadre enfant à exploiter, pour réaliser Modifier tout le contenu du sous-cadre. Parmi eux, la méthode d'obtention des sous-cadres est la suivante :

var frameObj = $(frames["frameName"]);

Parmi eux, les frames sont un objet global, qui contient la collection de tous les frames du document. Vous pouvez obtenir les informations requises en ajoutant le. nom ou identifiant du cadre entre crochets.

Ensuite, utilisez l'objet frameObj pour exploiter le contenu du cadre. L'exemple de code suivant :

var frameObj = $(frames["frameName"]);
// 更改frame的src为http://www.example.com
frameObj.attr("src", "http://www.example.com");
// 获取frame的内容
console.log(frameObj.contents().find('.className').html());

2. Utilisez JS dans le cadre enfant pour obtenir l'objet de la page parent, puis utilisez l'ID de la page parent ou le nom pour opérer. Parmi eux, la méthode d'obtention de la page parent est la suivante :

var parentObj = $(window.parent.document);

Parmi eux, l'objet de la fenêtre parent est obtenu via window.parent, puis l'objet Document de la fenêtre est obtenu via document.

Utilisez ensuite l'objet parentObj pour faire fonctionner le contenu de la page parent. L'exemple de code suivant :

var parentObj = $(window.parent.document);
// 更改父页面的title
parentObj.find('title').html('新的标题');
// 获取父页面的内容
console.log(parentObj.find('.className').html());

3. Scénarios d'utilisation du cadre de changement de jQuery

Lorsqu'il y a plusieurs cadres dans la page, modifiez dynamiquement le contenu du cadre pour obtenir une transparence L'effet de rafraîchir la page mise à jour.

1. La page parent contrôle le contenu de la page enfant via une interaction avec le cadre enfant, comme la modification de la couleur, de la taille, etc. d'un élément de la page enfant dans la page parent.
2. La page enfant soumet le formulaire ou obtient les données de la page parent grâce à l'interaction avec la page parent, réalisant le transfert et le partage de données.
3. 4. Choses à noter

En raison des requêtes inter-domaines, par défaut, les cadres ne peuvent pas accéder les uns aux autres et ne peuvent pas être modifiés. Cependant, la communication entre domaines peut être obtenue en définissant l'attribut sandbox du cadre et l'attribut allow-same-origin de la page parent.

1. les frames doivent utiliser le même nom de domaine, le même numéro de port et le même protocole pour accéder et se modifier mutuellement.
2. Pour accéder au frame dans jQuery, vous devez d'abord attendre que le DOM soit chargé et l'utiliser dans window.onload.
3. 5. Résumé

Cet article présente comment changer le cadre via jQuery, et détaille ses scénarios et précautions. Une compréhension approfondie de ces connaissances nous permet de mieux effectuer le développement front-end et de mettre en œuvre davantage de fonctions.

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!