testWebsite/crossIframe.html at master · mattscepter/testWebsite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Cross-origin iframe test — Type B1 capture</title>
    <style>
      body {
        font-family: system-ui, sans-serif;
        margin: 24px;
        color: #1a1a1a;
      }
      h1 {
        font-size: 20px;
      }
      .host-controls {
        margin: 16px 0;
      }
      .host-controls button {
        padding: 8px 14px;
        border: 2px solid rebeccapurple;
        background: #fff;
        cursor: pointer;
      }
      iframe {
        width: 100%;
        height: 800px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Cross-origin iframe test page (parent)</h1>
    <p>
      The frame below is served from
      <code>browserstack.github.io</code> — a different site from this page,
      so it loads as an out-of-process iframe (OOPIF).
    </p>

    <!-- some same-origin content in the parent, with a listener -->
    <div class="host-controls">
      <button id="host-btn" type="button">Parent button (same-origin)</button>
    </div>

    <!-- cross-origin / cross-site iframe -->
    <iframe
      id="cross-frame"
      title="BrowserStack a11y checks (cross-origin)"
      src="https://browserstack.github.io/bs-a11y-checks/all/index.html"
    ></iframe>

    <script>
      document.getElementById('host-btn').addEventListener('click', () => {});
    </script>
  </body>
</html>