メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

クリックでサブウインドウ(小窓)を表示させるスクリプトはそんない難しくないので、コピペで済ましがち。しかし、少しの工夫で、よりユーザにとって親切な実装ができることを知ったので、知識として忘れないようにメモ。

目次

    基本知識

    小窓表示にはwindow.openを使用します。

    こちらでとても詳しく説明されています。

    よくある小窓表示の実装コード

    まずはよく見る実装コードを見てみます。

    //下記のように変数に値が代入されているものとします
    $features = "width=400, height=300, menubar=no, toolbar=no, scrollbars=yes";
    
    //onclick属性にスクリプト記述する方法
    <a href="javascript:void(0);" onclick="window.open('sample.html', 'window', <?=$features;?>);">
      リンク
    </a>
    //href属性にスクリプトを記述する方法
    <a href="javascript:window.open('sample.html', 'window', <?=$features;?>);">
      リンク
    </a>
    

    これら2パターンでも、もちろん実装はできています。下のデモリンクをクリックで開いてみてください。

    しかし、一つだけ問題があります。リンク先を開く時、右クリックから別タブで表示を選択し、確実に別タブで表示させたいことはありませんか?

    私はその習慣が癖付いてしまっているので、基本的にリンクは右クリックを押して、別タブで開くのですが、上記の実装ではそれができません。ターゲットがブランクとなって真っ白なページが表示されるはずです。試してみてください。

    少し工夫した記述方法

    解決方法は以下

    $features = "width=400, height=300, menubar=no, toolbar=no, scrollbars=yes";
    
    //onclick属性にスクリプト記述する方法
    <a href="sample.html" onclick="window.open(this, 'window', <?=$features;?>);return false;">
      リンク
    </a>
    

    href属性にリンク先のurlを記述しておくと、onclick属性のurl部分には” this “でその値を渡すことができます。こうすることで、右クリックからの「別タブで開く」をユーザが選択した場合でも無事にリンク先が表示されます。

    また、それだけでは普通にクリックすると元のページまでリンク先に遷移してしまうので、” return false; “を追記しておきます。

     

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top