JavaScriptウィンドウを開いた後、ウィンドウ内の他のページのみ操作可能で移動できないように設定するにはどうすればよいでしょうか?

PHPz
リリース: 2023-04-25 13:55:19
オリジナル
784 人が閲覧しました

Web アプリケーションの開発プロセスでは、新しいウィンドウを開くために JavaScript がよく使用されます。ただし、ユーザーが新しく開いたウィンドウのみを操作し、元のページでは何も操作できないようにしたい場合があります。

次に、参考のための実装方法をいくつか示します。

方法 1: JavaScript を使用してウィンドウを開くときにパラメータを追加する

最初の方法は、JavaScript を使用して新しいウィンドウを開くことです。コントロール用のパラメータを追加してウィンドウを開きます。具体的な実装方法は次のとおりです。

window.open(url,name,'height=500,width=500,top=100,left=100,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
ログイン後にコピー

このコードでは、 window.open メソッドを使用して新しいウィンドウを開きます。 name はウィンドウ名です。 , url は新しいウィンドウのアドレスです。他のパラメータとしては、toolbar=nomenubar=noscrollbars=noresizable=nolocation= no status=no は、それぞれツールバー、メニューバー、スクロールバー、サイズ調整ボタン、アドレスバー、ステータスバーを非表示にすることを意味します。

この方法では、ユーザーは新しいウィンドウで現在のページのコンテンツのみを確認でき、他の操作は無効になります。

方法 2: JavaScript コードを使用して他のページを無効にする

2 番目の方法は、新しく開いたウィンドウで他のページを無効にする JavaScript コードを追加することです。この方法では、新しく開いたページに次のコードを追加する必要があります:

window.opener.location.href='javascript:;';
ログイン後にコピー

このコードの機能は、元のページのアドレスを javascript:; に変更して、ユーザーがクリックできるようにすることです。元のページではどのリンクも機能していません。

さらに、次のコードを追加して、新しいウィンドウを開いた後、ユーザーがブラウザの戻るボタンをクリックしても元のページに戻れないようにすることもできます。

history.forward();
ログイン後にコピー

方法 3: 無効にするイベントを設定して他のページを開く

3 番目の方法は、新しく開いたウィンドウに切り替えたときにシステムが元のページの操作を自動的に無効にするようにイベントを追加することです。具体的な実装は次のとおりです。

var newpage = window.open("http://www.example.com");
newpage.onfocus = function () {
    window.blur();
    setTimeout(function () { window.focus(); }, 100);
};
ログイン後にコピー

このコードでは、window.open メソッドを使用して新しいウィンドウを開き、それを変数 newpage に保存します。 newpage.onfocus は、ユーザーが新しいウィンドウに戻ったときに自動的に実行されるイベントを指します。 window.blur() メソッドを使用して元のページを無効にし、100 ミリ秒後にウィンドウを再フォーカスします。

概要

上記は、新しく開いたウィンドウのみを操作し、元のWebページは操作しないように制御する方法です。方法によって長所と短所が異なるため、実際のニーズに応じて適切な方法を選択して使用できます。

以上がJavaScriptウィンドウを開いた後、ウィンドウ内の他のページのみ操作可能で移動できないように設定するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート