レイヤはポップアップ レイヤを閉じ、親インターフェイス関数の実装メソッドを更新します

この記事では、ポップアップ レイヤーを閉じて親インターフェイスを更新するレイヤー機能を主に紹介し、layui のレイヤーを使用してポップアップ レイヤーを閉じるときに親インターフェイスを更新する場合の一般的な実装テクニックと関連する操作上の注意事項を分析します。必要な方は参考にしていただければ幸いです。

この記事の例では、ポップアップ レイヤーを閉じて親インターフェイスを更新するレイヤー関数について説明します。参考のために皆さんと共有してください。詳細は次のとおりです。

layer は、近年人気のある Web Elastic Layer コンポーネントであり、あらゆるレベルの開発者にサービスを提供することに尽力しています。リラックスできる豊かでフレンドリーな操作体験を備えています。

最近のプロジェクトはhuiフロントエンドフレームワークを使用しており、そのポップアップレイヤーにはレイヤープラグインが使用されており、ポップアップレイヤーを閉じる操作体験は誰もが知っています。親ページを更新する必要があります。書き始めたとき、私は自分の誤解に陥っていました。 ポップアップレイヤーが正常に処理された後、私が呼び出したのは、

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

こう書くのが正しいのですが、このように書くと、 1 つだけ使用できます。 複数の場所から呼び出された場合、元のアドレスに戻ることはできず、新しい URL アドレスにリダイレクトされます。そして、プロジェクトの途中で、特定のポップアップ レイヤーが 2 か所から呼び出されたため、明らかにこのソリューションは適切ではなく、最適化する必要があります。 Baidu が調べたところ、次の 2 つの最適化ソリューションが見つかりました:

オプション 1:

レイヤー ポップアップ レイヤーで親インターフェイスのリロード関数を呼び出す

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

オプション 2:

レイヤーの呼び出し プラグインの終了コールバックメソッド:

end - レイヤーが破棄された後にトリガーされるコールバック

タイプ: 関数、デフォルト: null

レイヤーが存在する限り、確認であってもキャンセルであっても破棄された場合、end はパラメータを持たずに実行されます。

親ウィンドウがレイヤーポップアップボックスを開くときに、終了コールバックを追加します

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();
      }
});

レイヤーポップアップボックスが処理された後、他の更新操作関数を呼び出す必要はなく、直接閉じるだけです

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

それに比べて、操作ロジックの点では、ポップアップ ボックスの処理ロジックが正常に実行された場合にのみ、ポップアップ ボックスを手動で閉じても更新操作がトリガーされないため、最初の解決策の方が優れています。ポップアップ ボックスを閉じるために関数が呼び出された場合、親インターフェイスの更新操作がトリガーされます。 このロジックに基づいて、オプション 1 を選択する必要があります。オプション 2 では、ページは何があっても更新されますが、実際には理由もなくサーバーの処理負荷が増加します。

オプション 2: サブページの処理結果をサブページの親ページに送信する問題を解決できます。

layer.js に親クラスのポップアップ層を閉じるコールバックがある場合、前のフォームの送信が失敗する問題について:

解決方法: インターネット上にたくさんあり、一部は ajax リクエストに変換され、データ送信が完了すると親が閉じられます。 クラス ポップアップ レイヤー:

親ポップアップ レイヤーを閉じる方法は次のとおりです:

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

ajax を使用しても問題ありませんが、私が行っているのは支払いです。支払いのためにページをポップアップする必要がありますが、Ajax に変換できません。その後、上司に「後でシャットダウンを実行してもらえませんか？」と言われました。これは試してみるのもいいアイデアですね。

添付コード:

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

親ウィンドウを閉じた後にウィンドウを開く必要もあります。どうすれば解決できますか? 後で、layer.js に親のメソッドを呼び出すという良い方法があることがわかりました。これは子ウィンドウの影響を受けません。parent クラスのメソッド名 (パラメーター) を親ウィンドウで呼び出すだけです。

関連する推奨事項:

layuiフレームワークのレイヤーの親ページと子ページ間の対話の詳細な説明

layuiのレイヤーフロントエンドコンポーネントは画像表示機能を実装します

jQuery、レイヤーは実装しますポップアップレイヤーの開閉関数 例を詳しく解説

以上がレイヤはポップアップ レイヤを閉じ、親インターフェイス関数の実装メソッドを更新しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。