Update 2.html

2.html

@@ -57,9 +57,10 @@
     <script>document.getElementById("username").value = "izum"+localStorage.getItem("no")+"@mbox.re";</script>
 			<input style="display: none;" autocomplete="current-password" class="form-input" name="password" placeholder="Password" required="" type="password" value="!Aaaaaa0"></label>
 	<div>
-		<button class="btn btn-lg w-full" type="submit">１．このボタンをクリック</button>
+		<button class="btn btn-lg w-full" type="submit" id="open">１．このボタンをクリック</button>
 		</div>
-  <li>
+<div id="hide">
+      <li>
     <div><b>２．下記の画像のように操作し、色の付いていないメッシュを作成する。</b>
       <img src="img1.png" alt="手順画像">
       作成されたメッシュの例：
@@ -83,38 +84,39 @@
   style="height: 350px;">
 </model-viewer>
   </li>
-
+</div>
 <script>
 let pipWindow = null; // PiPウィンドウを保存する変数
 
-document.addEventListener('visibilitychange', async () => {
-  if (document.visibilityState === 'hidden') {
-    // タブから離れたとき
-    if ('documentPictureInPicture' in window) {
-      try {
-        pipWindow = await documentPictureInPicture.requestWindow();
-        pipWindow.document.body.innerHTML = document.body.innerHTML;
+// 初期状態で #hide を非表示にする
+document.getElementById('hide').style.display = 'none';
 
-        // スタイルもコピーする
-        const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
-        styles.forEach(style => {
-          pipWindow.document.head.appendChild(style.cloneNode(true));
-        });
+// ボタンのイベントリスナーを設定
+document.getElementById('open').addEventListener('click', async () => {
+  // まず #hide を非表示にしておく
+  document.getElementById('hide').style.display = 'none';
 
-      } catch (error) {
-        console.error('PiPウィンドウ起動エラー:', error);
-      }
-    }
-  } else if (document.visibilityState === 'visible') {
-    // タブに戻ったとき
-    if (pipWindow && !pipWindow.closed) {
-      pipWindow.close();
-      pipWindow = null;
+  if ('documentPictureInPicture' in window) {
+    try {
+      pipWindow = await documentPictureInPicture.requestWindow();
+      pipWindow.document.body.innerHTML = "<iframe src='3.html' style='width:100%; height:100%; border:0;'></iframe>";
+
+      // スタイルもコピーする
+      const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
+      styles.forEach(style => {
+        pipWindow.document.head.appendChild(style.cloneNode(true));
+      });
+
+    } catch (error) {
+      console.error('PiPウィンドウ起動エラー:', error);
+      // エラーが起きたら #hide を表示する
+      document.getElementById('hide').style.display = 'block';
     }
+  } else {
+    // documentPictureInPicture 自体がなければ #hide を表示
+    document.getElementById('hide').style.display = 'block';
   }
 });
 </script>
-
-
 </body>
 </html>