4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Promise を返す window.open()

Posted at

非同期に window.open して Promise を返す関数を作りました。
日本語がめちゃくちゃですが、伝わりますかね……?

async function openNewWindowAsync(urlOrForm) {
    const windowName = + new Date();
    const subWindowRef = window.open('_blank', windowName);
    if (urlOrForm instanceof HTMLFormElement){
        urlOrForm.target = windowName;
        urlOrForm.submit();
    }else{
        window.open(urlOrForm, windowName);
    }
    return new Promise(resolve => {
        function _loadCheck() {
            if (subWindowRef.document.readyState == "complete") {
                return resolve(subWindowRef);
            }
            setTimeout(_loadCheck, 1000);
        }
        setTimeout(_loadCheck, 1000);
    });
};

別タブにページを開いて、開いた先で何かする

URLを渡すと、別ウィンドウ(タブ)に開いて Promise を返し、ロードが終わった感じになったら開いた先の Window オブジェクトで解決します。
当然ですが、同一オリジン前提です。(開くだけならできますが)

openNewWindowAsync('http://example.com/').then(w=>w.alert('元ページからこんにちは。'))

別タブでフォームを送信して、開いた先で何かする

たとえば、https://www.google.com/ にキーワードを入れたのちに実行すると、別タブで検索結果を表示して、ロードが終わった感じになったら、そこで何かをすることができないこともないです。

openNewWindowAsync(document.querySelector('form')).then(w=>w.alert('検索は終わりましたか?'))

なお

当たり前ですがポップアップブロックにばっちり引っかかります。
自分用のブックマークレットとかユーザースクリプトとか、そういうの向け?みたいな?
Firefox87とChrome89でしか確認していません。
 
 
 

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?