【JavaScript】ユニークなIDを生成して、window.open()の「アクセスが拒否されました」のエラーに対処する

先日遭遇した問題として、
JavaScriptを利用してブラウザのタブを開く場合、「アクセスが拒否されました」と表示されてうまくいかないことがあった。

原因はwindow.open()の引数として、
windowNameを’blank’固定で渡していたため、既に同じものが存在する場合に開けなくなったようだった。

window.open()の構文は下記に引用しておきます。

構文

var window = window.open(url, windowName, [windowFeatures]);

引数

url

DOMString で、読み込むリソースの URL を示します。これは HTML ページ、画像ファイル、その他のブラウザーが対応しているリソースのパスまたは URL にすることができます。空文字列 (“”) が url として指定されると、対象の閲覧コンテキストに空のページが開きます。

windowName 省略可

DOMString で、指定したリソースを読み込むための閲覧コンテキスト (ウィンドウ、 <iframe>、タブ) の名前を指定します。名前が既存のコンテキストを示していない場合は、新しいウィンドウが作成され、 windowName で指定した名前が与えられます。

この名前は <a> や <form> 要素の target 属性のターゲットとして使うことができます。この名前はホワイトスペースを含んではいけません。これはウィンドウのタイトルとしては使用されないことに注意してください。

windowFeatures 省略可

DOMString で、ウィンドウ特性とそれに対応する値を “name=value” の形式で指定したもののカンマで区切りのリストです。これらの機能には、ウィンドウの既定のサイズや位置、ツールバーを含めるかどうかなどのオプションが含まれます。文字列にはホワイトスペースを入れてはいけません。指定できる各機能については、下記のウィンドウ特性を参照してください。

一時的な処理で、処理が終わったらすぐ閉じられるし2回押される事も基本的にはない処理だったんですけど、他の処理との兼ね合いというか、他で既に’blank’を使用してタブが開かれていることがあるようで、ある条件の下でエラーが発生するようだった。

Window.open()の構文上は、windowNameの省略ができるので省略して実装しても良さそうだったのですが、
windowNameを指定する実装にしていたので、
これを’Blank’固定ではなく、ユニークな名前になるようにして対応をしました。
短時間で連続で開かれることはないので、これで特定の条件の下でのエラーは発生しなくなりました。

ユニークなIDを生成する

今回の対応ではユニークな名前が生成出来れば良く、
生成した名前をどこかで使用することはないので、現在時刻を利用します。

コードは以下。

var id = new Date().getTime().toString();

getTime()ではミリ秒までの値を取得できるので、
同じ端末上ではほぼ被ることはないでしょう。
連打出来ない仕組みも入っているのでこれで問題無いはずです。

ユニークなIDを生成した後でwindow.open()を行うので下記のような実装であれば毎回違うIDでwindow.open()が動きますね。

var id = new Date().getTime().toString();
var window = window.open(url, id);

↓↓↓よかったらクリックお願いします！