WordPress

【WordPress】JavaScript で指定したURLを開くサンプル(window-open)


JavaScript で URL を開くサンプル

WordPress ご利用者向け、JavaScript で 指定した URL を開く方法と、コードのサンプルです。

JavaScript で指定のURLを開く例

JavaScript で指定の URL を開く場合は、window.open() を使います。

サンプル

ボタン押下で、サイトを開きます。


サンプルの実装コードです。WordPress で利用する場合は、「カスタムHTMLブロック」の中に記述してください。

<form>
    <input style="width:300px" type="button" value="boonboonblog.com を開く" id="mybtn1" onclick="functionOpenWindow()"><br>
</form>

<script>
function functionOpenWindow() {
    window.open("https://boonboonblog.com/",null,"noopener=yes,noreferrer=yes")
}
</script>

Window.open( "開く対象の URL", "名前", "オプション" ) を指定します。

オプションで指定できる主な項目は次の通りです。

left
ウィンドウの表示位置(横)(画面左上からの座標)
top
ウィンドウの表示位置(縦)(画面左上からの座標)
width
ウィンドウの横幅
height
ウィンドウの縦幅
menubar
メニューバーの有無( yes / no )
toolbar
ツールバーの有無 ( yes / no )
status
ステータスバーの有無 ( yes / no )
location
アドレスバーの有無 ( yes / no )
scrollbars
スクロールバーの有無 ( yes / no )
resizable
サイズの変更の許可 ( yes / no )
noopener
新しいウィンドウから、元のウィンドウにアクセスできなくする ( yes / no )
noreferrer
新しいウィンドウのページに、リンク元の情報を提供しない ( yes / no )

windows.open()の自動生成

利用用途に合った Windows.open() スクリプトを自動生成します。

条件を設定してください。

URL
Left 利用する
Right 利用する
Width 利用する
Height 利用する
Menubar 利用する
Toolbar 利用する
Statusbar 利用する
Location 利用する
Scrollbars 利用する
Resizable 利用する

Window.open() のコードを生成します。ボタンを押してください。


コピーしてご利用ください。

まとめ

JavaScript で指定した URL を開く場合は、windows.open() を利用します。

WordPress で利用する場合は、「カスタムHTMLブロック」を用いてコードを埋め込みます。

WordPress のおすすめテーマ

  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる

本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。

AFFINGER の紹介はこちら

AFFINGER アフィンガーテーマを解説・メリット・デメリット

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る

もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン



ブログランキング・にほんブログ村へ  


Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。