@frswataru (本石渉)posted at 2020-12-22

HTML ウインドウ画面を閉じる

Q&A

解決したいこと

下記の画面のCloseを押したら画面が閉じるようにしたい
解決方法を教えて下さい。

私はド素人です

該当するソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECSS3.0</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <link href="css/slick.css" rel="stylesheet" type="text/css">
    <link href="css/slick-theme.css" rel="stylesheet" type="text/css">

</head>
    <body>
        <script src="script.js"></script>


        <div class="header">
            <div class="header-logo"font-weight:bold;>E<span style="font-size:0.3em;font-weight:normal;">lectronic</span>
                                     C<span style="font-size:0.3em;font-weight:normal;">heck</span>
                                     S<span style="font-size:0.3em;font-weight:normal;">heet</span>
                                     S<span style="font-size:0.3em;font-weight:normal;">ystem</span>

            </div>

                <div id="container">
                    <div class="circle icon">
                        <span class="bar top"></span>
                        <span class="bar middle"></span>
                        <span class="bar bottom"></span>
                    </div>
                </div>

                <div id="containerLogo">
                        <a href="index.html"><img src="images/TCD_B.jpg"></a>   
                </div>




            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script>
                $("#container").click(function () {
                    $(".icon").toggleClass("close");
                })
            </script>


        </div>

        <div class="main">
            <nav id="nav">
                <ul>
                    <li><a href="javascript:;" onclick="winClose(); return false;">Close</a></li>
                    <li><a href="index.html">Menu</a></li>
                </ul>

            </nav>


            <div class="contents">

                <div class="contents-item_Camera">
                    <img src="images/Camera.png">
                    <p>Camera</p>   
                </div>

                <div class="contents-item_Create">
                    <img src="images/Create.png">
                    <p>Create</p>   
                </div>


            </div>
        </div>
    </body>
</html>

3Answer

@mogamoga1337 posted at 2020-12-29

多分仕様上無理

Window.close() メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。

このメソッドが許可されるのは、window.open() メソッドを用いたスクリプトにより開かれたウィンドウに対する呼び出しのみです。ウィンドウがスクリプトにより開かれたものでない場合、次のようなエラーがコンソールに表示されます: スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。

1Like

@h-ohshiro-1226 posted at 2020-12-23

私も初心者です。一部分のみ変更してみましたので試してください。
closeのテキストにidを付与しました。
そのidをgetErementByIdで抽出して、クリック（onclick）すればブラウザを閉じます（window.close）。
書籍や動画等、色々確認しましたがscriptは、/bodyの直前に挿入する方が良いそうです。

５０行目

qiita.rb

<ｌi><a href="#" id="close">Close</a></li>

７２行目以降

qiita.rb

  <script>
    document.getElementById("close").onclick = () => {
      window.close();
    }
  </script>
</body>
</html>

0Like

Comments

@frswataru
Questioner
作動すること確認出来ました
不安定になり作動しない時もあることも確認出来ました
@h-ohshiro-1226
すみません、コードを見返しましたが原因が分かりませんでした。
一度、scriptを/bodyの直前にまとめてみてはいかがでしょうか。

@tetr4lab posted at 2020-12-23

取り敢えず閉じさえすれば良いのであれば、下記のように変更するだけで閉じます。
(Chromeで検証済み)

<li><a href="javascript:;" onclick="winClose(); return false;">Close</a></li>

↓

<li><a href="javascript:;" onclick="window.close(); return false;">Close</a></li>

きちんとした解決のためには、script.jsの提示が必要だと思います。