[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門
MacからLaradock PostgreSQLで接続エラー
Mac で Laradock の構築
Dockerで不要なイメージを削除
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
Composer インストール
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019
ロケールの再構築
vagrant グループに Apacheを追加
Linux2 Apache2 + PHP7.3 + PostgreSQL10
Anadondaの削除
[Mac]初期設定メモ(CentOS)
[Mac]PostgreSQL起動
FormRequest を利用したバリデーション
try-catch で Exception検知
[Debian]Node.js安定板インストール
Middlewareを利用したルートグループ化
namespaceを利用したルートグループ化
名前付きルートによるリダイレクト
artisanコマンド
IE11以下でclosest() を利用する
Karma と Mochaインストール
コンポーネントを親に登録
[脱jQuery]LoadingOverlay をネイティブで実装
Targetを利用せずに新規ウィンドウを開く(rel,class)
[脱jQuery]ネイティブでDrag&Dropやtableソート
[脱jQuery]$(document).on() をネイティブでコーディング
[Git].gitignore が反映されない
[Git]不要ファイル履歴削除
[GAS]Gmail指定ラベルの不要メール削除
UFJ API(開発用)を利用してみる
RuntimeException No application encryption key has been specified
2019/07/01
icon Targetを利用せずに新規ウィンドウを開く(rel,class)
クラス名や「rel」アトリビュートを指定して、新規ウィンドウで開く

サンプル

html_samples/popup.html

HTML


    rel New Window
    class New Window
HTML属性にウィンドウ名「window_name」、オプション「window_option」を指定した

rel を指定して開く

rel属性を指定した querySelectorAll() で NodeList を取得して click イベントを登録 (IEだと単にループで回せないので、一工夫必要)

    function loadPopupRelEvent(rel_name) {
        var popupEvent = function(event) {
            var window_name = '_blank';
            var window_option = null;
            if (this.getAttribute('window_name')) window_name = this.getAttribute('window_name');
            if (this.getAttribute('window_option')) window_option = this.getAttribute('window_option');
            window.open(this.href, window_name, window_option).focus()
            event.preventDefault();
            event.stopPropagation();
        }
        var query_string = '[rel = "' + rel_name + '"]';
        let elements = document.querySelectorAll(query_string);
        if (!elements) return;
        [].forEach.call(elements, function (element) {
            element.addEventListener('click', popupEvent, false);
        });
    }
    document.addEventListener('DOMContentLoaded', function () {
      loadPopupRelEvent('popup', params);
    });

クラス指定して開く

getElementsByClassName() で HTMLCollection を取得して click イベントを登録 (IEだと単にループで回せないので、一工夫必要)

    function loadPopupClassEvent(class_name) {
        var popupEvent = function(event) {
            var window_name = '_blank';
            var window_option = null;
            if (this.getAttribute('window_name')) window_name = this.getAttribute('window_name');
            if (this.getAttribute('window_option')) window_option = this.getAttribute('window_option');
            window.open(this.href, window_name, window_option).focus()
            event.preventDefault();
            event.stopPropagation();
        }
        let elements = document.getElementsByClassName(class_name);
        if (!elements) return;
        [].forEach.call(elements, function (element) {
            element.addEventListener('click', popupEvent, false);
        });
    }
    document.addEventListener('DOMContentLoaded', function () {
      loadPopupClassEvent('popup_class', params);
    });
要素にclickイベントを登録し、正規表現でURLパースする