Javascriptライブラリ「Toastr」について

Question

Javascriptライブラリ「Toastr」のことで質問です。
仮に「A」というページがあったとします。

AのページにToastrを設置はできていますが、
toastr["success"]　の部分で表示されたポップアップを消す"closeButton": trueということではなく、
toastr["success"]　の部分で表示されたポップアップをクリックすると、その背景にある大元の「Ａ」のページを閉じることはできませんでしょうか。

試行錯誤しましたが、ポップアップされたtoastr["success"]　の部分は閉じることはできるのですが、大元の「Ａ」のページを閉じることができません。

ご教授願います。

Answer

ECマスターズの田中です。

JavaScriptでページを閉じる場合は
基本的に「window.close」メソッドをご利用いただく形になりますが、
原則として、JavaScript自身で開いたウィンドウのみ
閉じることができる仕様となっております。
セキュリティ上の観点や、閲覧者の意図しない動作を避けるため、などの理由で
そのような仕様になっているのだと思われます。

たとえば、
https://web-designer.cman.jp/javascript_ref/window/close/
上記ページでサンプルとして紹介されている、
一度再表示してCLOSEを実行する「1.自ウインドウを閉じる」の方法を
導入していただいてはいかがでしょうか。

たとえば、toastrのオプションにて、
"onCloseClick": function(){ open('about:blank', '_self').close(); }
と指定する、といった形になります。

こちらでも動作しない場合は、
実際のページを確認しながら試行錯誤を行う必要がございますので、

実際に導入を検討されているページのURLを
「投稿内容について報告する」よりお知らせいただきますようお願いします。

Answer

ありがとうございます。
chromeでしか、まだ動作確認してませんが、できました！
ありがとうございました。

Answer

一度以前解決したのですが、
上書き保存してしまったようで、わからなくなってしまいました。

"onCloseClick": function(){ open('about:blank', '_self').close(); }
をどの部分に記述すればよいでしょうか。

Answer

ECマスターズの伊藤です。

頂いておりますご質問についてですが、
担当より、明日以降に回答させていただきます。

恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

また、ご回答の際に、ページの確認が必要な場合がございますので、
先にページのURLをご連絡いただきますと幸いです。

フォーラムへのご投稿が難しい場合は、
一番最初の投稿の右下にございます
「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

ECマスターズの田中です。

ご報告いただき、ありがとうございます。
いただいたページがポップアップで開くイメージでよろしいでしょうか。

「楽天市場へ」ボタンは、toastr由来の閉じるボタンではなく
直接タグを記載して、リンクが設定されておりました。
この画像を差し替えてご対応いただく場合は、
タグのclickイベントに、この動作を適用していただければ結構です。
たとえば、下記のような形です。
（JavaScript内に記述してあるため、タグ中の " に対して、直前に\を追記していただく必要があることをご注意ください）

ポップアップを閉じる

toastr由来の閉じるボタンを利用する形にご変更いただく場合、
他の通知に影響を与えないよう、最後の通知を出す直前で

toastr.options.closeButton = true;
toastr.options.onCloseClick = function() { open('about:blank', '_self').close(); }

のようにご設定ください。

Answer

ありがとうございます。
無事解決いたしました。