WordPress

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


タイトル






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



JavaScript で指定のURLを開く例



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



サンプル



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






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


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

<script>
function functionOpenWindow() {
      window.open("http://irojiroharaguro.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 の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

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