の 「window.open()」 JavaScript メソッドを使用すると、開発者は Web ページ内の別のウィンドウにリンクできます。このウィンドウは、指定されたアクションがユーザーによって実行されると呼び出されます。
簡単に言うと、その主な機能は、 「window.open()」 方法は、メイン Web ページのインターフェイスを妨げずに、メイン Web ページ上に新しいウィンドウを開くことです。シナリオによっては、新しいウィンドウは正常に開きますが、スクロールバーがまったく表示されず、ユーザーに悪い印象を与えます。
このクイック ガイドでは、JavaScript の window.open() メソッドを使用して垂直スクロールバーを作成するプロセスを詳しく説明します。
JavaScript で「window.open()」を使用して垂直スクロールバーを作成する方法
の 「window.open()」 このメソッドはデフォルトで、新しい Web ページのコンテンツの長さと開いているウィンドウのサイズに応じて垂直スクロールバーを追加します。 Web ページのコンテンツがウィンドウ サイズより大きい場合、CSS プロパティを適用せずに、デフォルトでスクロールバーが追加されます。ただし、開発者がカスタム スクロールバーを追加したい場合は、以下の例で説明する方法に従うことができます。
構文
の構文は、 「window.open()」 方法は以下に記載されています。
窓。 開ける ( パス 、 行き先 、 winFeat ）ここ、 'パス' 新しいウィンドウで開かれる Web ページのパスです。の '行き先' 表示される新しいウィンドウの位置です。次のように設定できます。 '空白' 、 '親' 、 '自己' または '上'。 3 番目のパラメータは「winFeat」またはウィンドウ機能で、ウィンドウをカスタマイズする必要に応じて設定できるさまざまな値を提供します。
を使用して、新しく開いたウィンドウに垂直スクロールバーを生成する例をいくつか見てみましょう。 「window.open()」 方法。
例: 「window.open()」メソッドによる「scrollbars」ウィンドウ機能の使用
この場合、 「window.open()」 メソッドは以下に沿って使用されます 「スクロールバー」 以下に示すように、新しく開いたウィンドウに垂直スクロールバーを設定するウィンドウ機能:
< 頭 >< スクリプトの種類 = 「テキスト/JavaScript」 >
関数 セットスクロール ( ） {
だった 新しい勝利 = 窓。 開ける ( 'https://linuxhint.com' 、 '上' 、 '幅=500、高さ=500、スクロールバー=はい' ） ;
}
脚本 >
頭 >
< 体 >
< p > 下のボタンを押して、Linuxhint ブログを開きます。 - スクリーンウィンドウ。 p > クリックミー ボタン >
体 >
上記のコードの説明:
- まず、 「setScroll()」 関数は内部で定義されています 「<スクリプト>」 鬼ごっこ。変数「newWin」も作成されます。 「window.open()」 その中のメソッド。
- 次に、Web ページの最初のパラメータ「リンク」を 「window.open()」 方法。また、第2パラメータに「top」の値を設定すると、Webブラウザの最上部に新しいウィンドウが表示されます。
- その後、ウィンドウの動作をカスタマイズするには、次のウィンドウ機能を使用します。 '幅' 、 '身長' そして 「スクロールバー」 ウィンドウの幅と高さ、スクロールバーをそれぞれ設定します。
- 最後に、 'ボタン' を引き起こす要素 「setScroll()」 を使用した関数 「オンクリック」 イベントリスナー。
コンパイルが終了すると、出力は次のようになります。
出力により、新しく生成されたウィンドウにスクロールバーが追加されたことが確認されます。
例 2: スクロールバーを手動で設定する
スクロールバーを設定するもう 1 つの方法は、CSS を利用することです。 「オーバーフローっぽい」 そして 「オーバーフローエックス」 次に示すように、新しいウィンドウで開かれる 2 番目のページにプロパティを追加します。
< 頭 >< スクリプトの種類 = 「テキスト/JavaScript」 >
関数 セットスクロール ( ） {
だった 新しい勝利 = 窓。 開ける ( 'https://linuxhint.com' 、 上 、 '幅=500、高さ=500、サイズ変更可能、スクロールバー=1);
}
<本文>
下のボタンを押して、画面内ウィンドウで Linuxhint ブログを開きます。
クリックしてください