ホームページ > 記事 > ウェブフロントエンド > jqueryポップアップウィンドウを閉じた後、ページを更新します。
Web 開発では、ポップアップ ウィンドウは、ユーザーに重要な情報を表示したり、ユーザーが何らかの操作を実行できるようにするためによく使用されます。 jQuery ポップアップ プラグインを使用すると、ポップアップ ウィンドウを簡単に作成できます。しかし、ポップアップウィンドウを閉じるとページが自動的に更新されず、多くの開発者がこの問題に遭遇したことがあると思います。この記事では、jQuery ポップアップ プラグインを使用して、ポップアップ ウィンドウを閉じた後にページを自動的に更新する方法を紹介します。
1. jQuery ポップアップ プラグインの使用
jQuery ポップアップ プラグインには多くの種類があり、その中でよく使用されるのは Layer、Bootstrap Modal、Sweet です。警報などLayer を例に挙げると、使用前に jQuery ライブラリと Layer の CSS ファイルと JS ファイルを導入する必要があります。
<link rel="stylesheet" href="path/layer.css"/> <script src="path/jquery.min.js"></script> <script src="path/layer.js"></script>
次に、次のコードを使用して簡単なポップアップ ウィンドウを作成します。
layer.open({ title: '提示', content: '这是一条提示信息' });
これにより、タイトルが「プロンプト」、内容が「これはプロンプトです」というポップアップ ウィンドウが作成されます。メッセージ」ポップアップが表示されます。ただし、ユーザーがポップアップ ウィンドウを閉じると、ページは自動的に更新されないため、対応するコードを記述する必要があります。
2. 解決策
ポップアップ ウィンドウを閉じた後にページを更新するための解決策は多数ありますが、次に、一般的な方法をいくつか紹介します。
1. location.reload() メソッドを使用する
location.reload() メソッドは現在のページを更新できるため、このメソッドを使用してポップアップ内のページを更新できますウィンドウを閉じるイベント。具体的なコードは次のとおりです。
layer.open({ title: '提示', content: '这是一条提示信息', end: function () { location.reload(); } });
ここでは、ポップアップ ウィンドウの end 属性を使用してコールバック関数をバインドします。ユーザーがポップアップ ウィンドウを閉じると、この関数が実行されてページが更新されます。
location.reload() メソッドを使用すると、JavaScript、CSS、画像などを含むすべてのリソースが再ロードされることに注意してください。ページ内に大きなリソースがある場合、ページの更新速度が遅くなります。 . したがって、使用には注意が必要です。
2. location.href メソッドを使用する
location.href メソッドは新しい URL にジャンプできますが、現在のページの URL にジャンプするとページを更新できます。具体的なコードは次のとおりです。
layer.open({ title: '提示', content: '这是一条提示信息', end: function () { location.href = location.href; } });
ここでは、ポップアップ ウィンドウの end 属性も使用してコールバック関数をバインドし、この関数の location.href メソッドを使用して URL にジャンプします。現在のページを更新し、リフレッシュのページを実現します。
location.href メソッドを使用すると、リンクをクリックするのと同じように新しい URL にジャンプします。前のページに保存されていないデータがあると、データが失われる可能性があるため、注意が必要です。必要な場合は注意して使用してください。
3. location.replace メソッドを使用する
location.replace メソッドは、現在のページを指定された URL に置き換えることができ、ページを更新することもできます。具体的なコードは次のとおりです。
layer.open({ title: '提示', content: '这是一条提示信息', end: function () { location.replace(location.href); } });
同様に、ポップアップ ウィンドウの end 属性を使用してコールバック関数をバインドし、この関数の location.replace メソッドを使用して現在のページを置き換えます。現在のページの URL なので、ページの更新を実装します。
location.replace メソッドを使用すると、現在のページの履歴レコードが置き換えられることに注意してください。ユーザーはブラウザの戻るボタンを使用して前のページに戻ることができないため、このメソッドの使用にも注意が必要です。
上記は、jQuery ポップアップ プラグインを使用して、ポップアップ ウィンドウが閉じられた後にページを自動的に更新できるようにするための解決策です。もちろん、この機能を実現するには他にも多くの方法があり、実際の状況に応じて選択する必要があります。
以上がjqueryポップアップウィンドウを閉じた後、ページを更新します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。