La couche ferme la couche contextuelle et actualise la méthode d'implémentation de la fonction d'interface parent

Cet article présente principalement la fonction de fermeture de la couche contextuelle et d'actualisation de l'interface parent. Il analyse les techniques d'implémentation courantes et les précautions d'utilisation associées à l'utilisation de la couche layui pour actualiser l'interface parent lors de la fermeture de la couche contextuelle. Les amis dans le besoin peuvent se référer à ce qui suit, en espérant que cela puisse aider tout le monde.

L'exemple de cet article décrit la fonction de couche consistant à fermer le calque contextuel et à actualiser l'interface parent. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

layer est un composant de couche élastique Web qui a été populaire ces dernières années. Il propose une gamme complète de solutions et s'engage à servir les développeurs de tous. niveaux. Vous Les pages auront facilement une expérience de fonctionnement riche et conviviale.

Un projet récent utilise le framework front-end hui, et sa couche pop-up utilise le plug-in de couche. Pour la couche pop-up, tout le monde connaît une expérience d'exploitation, c'est-à-dire fermer la pop. -up, la page parent doit être actualisée. Quand j'ai commencé à écrire, je suis tombé dans mon propre malentendu. Une fois la couche contextuelle traitée avec succès, ce que j'ai appelé était :

var index = parent.layer.getFrameIndex(window.name);
parent.location.href=url;
parent.layer.close(index);

C'est correct , mais s'il est écrit comme ceci, il ne peut être appelé que depuis un seul endroit. S'il est appelé depuis plusieurs endroits, il ne peut pas revenir à l'adresse d'origine, mais redirige vers une nouvelle adresse URL. Et juste au milieu de mon projet, une certaine couche contextuelle a été appelée à deux endroits, donc évidemment cette solution n'est pas adaptée et doit être optimisée. Après avoir cherché sur Baidu, j'ai trouvé les deux solutions d'optimisation suivantes :

Option 1 :

Appelez la fonction de rechargement de l'interface parent dans la pop de couche -up layer

window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

Option 2 :

Appeler la méthode de rappel de fin du calque plug-in :

fin - rappel déclenché après la destruction de la couche

Type : Fonction, par défaut : null

Qu'il s'agisse de confirmation ou d'annulation, du moment que la couche est détruit, end sera exécuté sans aucun paramètre.

Lorsque la fenêtre parent ouvre la boîte contextuelle du calque, ajoutez le rappel de fin

function openLayer() {
  //iframe层
    parent.layer.open({
      type: 2,
      title: '修改',
      shadeClose: false, //点击遮罩关闭
      shade: 0.8,
      area: ['30%', '45%'],
      maxmin: true,
      closeBtn: 1,
      content: [url, 'yes'], //iframe的url，yes是否有滚动条
      end: function () {
        location.reload();
      }
});

Une fois le traitement de la boîte contextuelle du calque terminé , il n'est pas nécessaire d'appeler d'autres fonctions d'opération de rafraîchissement, il suffit de le fermer directement

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

En comparaison, la première solution est meilleure, car en termes de logique opérationnelle, la fermeture manuelle de la boîte contextuelle ne doit pas déclencher l'opération d'actualisation, ce n'est que lorsque la logique de traitement de la boîte contextuelle est exécutée avec succès et que la fonction est appelée pour fermer la boîte contextuelle que l'opération d'actualisation de l'interface parent sera être déclenché. Sur la base de cette logique, la première option doit être sélectionnée. Deuxième option, la page sera actualisée quoi qu'il arrive, ce qui augmente en fait la pression de traitement du serveur sans raison.

Option 2 : peut résoudre le problème de l'envoi des résultats traités de la sous-page à la page parent de la sous-page.

Pour le problème selon lequel lorsque layer.js a un rappel pour fermer la couche contextuelle de la classe parent, la soumission du formulaire précédent échoue :

Comment le résoudre : Il y en a beaucoup en ligne, et certains sont redirigés. Pour les requêtes ajax, fermez la couche pop-up parent après la transmission des données :

Voici comment fermer la couche pop-up parent :

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index); // 关闭layer

C'est OK d'utiliser ajax, mais ce que je fais, c'est le paiement. La page doit apparaître avant que je puisse payer, et elle ne peut pas être convertie en ajax. . Comment puis-je aider ? Plus tard, mon patron m'a dit : « Ne pouvez-vous pas exécuter l'arrêt plus tard ? C'est une idée qu'il serait bien d'essayer.

Ci-joint le code :

$("#myForm").submit();
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
setTimeout(function () {
  parent.layer.close(index); // 关闭layer
},500);

Je dois également ouvrir une fenêtre après avoir fermé la fenêtre parent. Comment résoudre ce problème plus tard ? couche découverte. Il existe un bon moyen dans js, qui consiste à appeler la méthode de la fenêtre parent. Cela n'est pas affecté par la fenêtre enfant. Vous pouvez transmettre : le nom de la méthode de la classe parent (paramètre). appelez layer.js dans la fenêtre parent. Sortez-le simplement.

Recommandations associées :

Explication détaillée de l'interaction de la page parent-enfant de la couche dans le framework layui

Le recto de la couche- Le composant final dans layui implémente la fonction d'affichage d'image

Explication détaillée d'exemples d'ouverture et de fermeture de couches contextuelles à l'aide de jQuery et layer

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!