Spaces:

soiz1
/

dev-tools

Running

App Files Files Community

soiz1 commited on May 19

Commit

266d361

verified ·

1 Parent(s): 1d96306

Update index.html

Browse files

Files changed (1) hide show

index.html +99 -35

index.html CHANGED Viewed

@@ -1,47 +1,111 @@
 <!DOCTYPE html>
 <html lang="ja">
-<head><meta charset="UTF-8"><title>iframe通信監視</title></head>
 <body>
-<h1>親ページ</h1>
-<div id="log"></div>
-<img src="/sjid.png" />
-<script>
-  const iframe = document.createElement('iframe');
-  iframe.style.display = 'none';
-  document.body.appendChild(iframe);
-  // iframe内部コード（Blobにする）
-  const iframeCode = `
-    window.addEventListener('message', e => {
-      if(e.data === 'start') {
-        fetch('https://jsonplaceholder.typicode.com/posts/1')
-          .then(res => res.text())
-          .then(text => {
-            parent.postMessage({ type: 'fetch-success', url: 'https://jsonplaceholder.typicode.com/posts/1', body: text.slice(0, 100) }, '*');
           })
-          .catch(err => {
-            parent.postMessage({ type: 'fetch-error', error: err.toString() }, '*');
-          });
-      }
-    });
-  `;
-  const blob = new Blob([iframeCode], { type: 'application/javascript' });
-  iframe.src = URL.createObjectURL(blob);
-  window.addEventListener('message', e => {
-    const log = document.getElementById('log');
-    if(e.data.type === 'fetch-success') {
-      log.innerHTML += `<div style="color:green">成功: ${e.data.url}<pre>${e.data.body}</pre></div>`;
-    } else if(e.data.type === 'fetch-error') {
-      log.innerHTML += `<div style="color:red">エラー: ${e.data.error}</div>`;
     }
-  });
-  // iframeが読み込み終わったら開始指示
-  iframe.onload = () => iframe.contentWindow.postMessage('start', '*');
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ja">
+<head>
+  <meta charset="UTF-8" />
+  <title>iframe + BlobでService Worker登録</title>
+</head>
 <body>
+  <h1>通信ログ（親ページ）</h1>
+  <div id="log"></div>
+  <script>
+    // iframe内で動くHTML（Service Worker登録用）
+    const iframeHtml = `
+<!DOCTYPE html>
+<html lang="ja">
+<head><meta charset="UTF-8"></head>
+<body>
+  <script>
+    // Service Workerのコード（文字列）
+    const swCode = \`
+      self.addEventListener('fetch', event => {
+        const { request } = event;
+        event.respondWith(
+          fetch(request).then(response => {
+            // クライアントにログを送信
+            self.clients.matchAll().then(clients => {
+              clients.forEach(client => {
+                client.postMessage({
+                  type: 'log',
+                  url: request.url,
+                  status: response.status,
+                  method: request.method
+                });
+              });
+            });
+            return response;
+          }).catch(error => {
+            self.clients.matchAll().then(clients => {
+              clients.forEach(client => {
+                client.postMessage({
+                  type: 'error',
+                  url: request.url,
+                  message: error.message
+                });
+              });
+            });
+            throw error;
           })
+        );
+      });
+    \`;
+    // BlobでSWスクリプト作成
+    const blob = new Blob([swCode], {type: 'application/javascript'});
+    const swUrl = URL.createObjectURL(blob);
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register(swUrl).then(() => {
+        parent.postMessage({type: 'sw-registered'}, '*');
+      }).catch(e => {
+        parent.postMessage({type: 'sw-error', message: e.message}, '*');
+      });
+      // SWからのメッセージを親iframeへ中継
+      navigator.serviceWorker.addEventListener('message', event => {
+        parent.postMessage({type: 'sw-message', data: event.data}, '*');
+      });
     }
+  <\/script>
+</body>
+</html>
+    `;
+    // iframe用Blob URL作成
+    const iframeBlob = new Blob([iframeHtml], {type: 'text/html'});
+    const iframeUrl = URL.createObjectURL(iframeBlob);
+    // iframe作成してDOMに追加
+    const iframe = document.createElement('iframe');
+    iframe.src = iframeUrl;
+    iframe.style.width = '100%';
+    iframe.style.height = '200px';
+    document.body.appendChild(iframe);
+    // ログ表示領域
+    const logDiv = document.getElementById('log');
+    // iframeからのpostMessage受信
+    window.addEventListener('message', e => {
+      if (!e.data) return;
+      if (e.data.type === 'sw-registered') {
+        logDiv.textContent += '✅ Service Worker登録完了\n';
+      } else if (e.data.type === 'sw-error') {
+        logDiv.textContent += '❌ Service Worker登録エラー: ' + e.data.message + '\n';
+      } else if (e.data.type === 'sw-message') {
+        const d = e.data.data;
+        if (d.type === 'log') {
+          logDiv.textContent += `🔵 [${d.method}] ${d.url} → ${d.status}\n`;
+        } else if (d.type === 'error') {
+          logDiv.textContent += `🔴 エラー: ${d.message} (${d.url})\n`;
+        }
+      }
+    });
+    // テストfetch（親ページから）
+    fetch('https://jsonplaceholder.typicode.com/posts/1');
+    fetch('https://httpstat.us/404');
+  </script>
 </body>
 </html>