ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScriptで新しいページをポップアップ表示する方法

JavaScriptで新しいページをポップアップ表示する方法

PHPz
リリース: 2023-04-21 09:42:55
オリジナル
3666 人が閲覧しました

Web 開発では、ページへのジャンプは頻繁に使用される操作ですが、JavaScript ではこの機能を簡単に実装できます。次に新しいページをポップアップし、JavaScriptでジャンプを実現する操作を紹介します。

1. 新しいページをポップアップする

新しいページをポップアップするには 2 つの方法を使用できます:

1. window.open() メソッドを使用する

window .open() メソッドは、ブラウザで新しいウィンドウまたはタブを開きます。その構文は次のとおりです:

window.open(url, name, specs, replace);
ログイン後にコピー

ここで、

  • url は、開かれるページ。
  • name はウィンドウまたはタブの名前です。名前を指定すると、同じ名前のすべてのウィンドウまたはタブが同じウィンドウまたはタブで開きます。名前が指定されていない場合、または空の文字列が指定されている場合は、毎回新しいウィンドウまたはタブが開きます。
  • specs は、新しいウィンドウまたはタブの幅、高さ、位置などを指定できるコンマ区切りのプロパティのセットです。このパラメータはオプションです。
  • replace は、現在のページの URL を置き換えるかどうかを示すブール値です。 true の場合、新しいページが現在のページを置き換えます。そうでない場合は、新しいウィンドウまたはタブで開きます。このパラメータもオプションです。

たとえば、次のコードを使用すると、新しいウィンドウを開いて Baidu のホームページにジャンプできます:

window.open("https://www.baidu.com", "baidu");
ログイン後にコピー

2. window.location.href 属性を通じて

window.location.href プロパティは、現在のページの URL を取得または設定できます。この属性を新しい URL に設定すると、ブラウザーはすぐにその URL にジャンプし、新しいページをポップアップするような効果が得られます。

たとえば、次のコードを使用して、ブラウザに Baidu のホームページにジャンプさせることができます:

window.location.href = "https://www.baidu.com";
ログイン後にコピー

2. ページ ジャンプを実装します

ポップアップ方法を理解した後、新しいページでは、ジャンプの実装方法も知る必要があります。

1. window.location.href 属性を使用する

window.location.href 属性を設定することで、ページ ジャンプを実現できます。たとえば、次のコードは現在のページを Baidu のニュース ページにジャンプできます:

window.location.href = "https://news.baidu.com/";
ログイン後にコピー

2. window.open() メソッド経由

window.open() メソッドを使用することもできます。ページジャンプを実現します。たとえば、次のコードは Baidu のニュース ページを新しいウィンドウまたはタブで開くことができます:

window.open("https://news.baidu.com", "baidu");
ログイン後にコピー

現在のページで新しいページにジャンプしたい場合は、window.location を使用する必要があることに注意してください。 .href プロパティ。新しいウィンドウまたはタブで新しいページを開きたい場合は、window.open() メソッドを使用できます。

3. 概要

上記の紹介を通じて、JavaScript を使用して新しいページをポップアップし、ジャンプ操作を実現する方法を学びました。 window.location.href 属性を使用する場合も、window.open() メソッドを使用する場合も、ページにジャンプするのに非常に便利な方法であり、ビジネス ニーズに応じて具体的な用途を選択できます。

以上がJavaScriptで新しいページをポップアップ表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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