demo/main.html


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

<!DOCTYPE html>
<html>

<head>
    <title>Document viewer</title>
    <style>
        .viewer {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            max-width: 60rem;
        }

        .viewer_frame {
            width: 100%;
        }
    </style>
</head>

<body>
    <main>
        <h1>
            Document viewer
        </h1>
        <button id="print-button">Print</button>
        <section class="viewer">
            <iframe id="frame" class="viewer_frame" src="page.html"></iframe>
        </section>
    </main>
    <script>
        document.getElementById("print-button").onclick = (e) => {
            let frame = document.getElementById("frame");
            frame.contentWindow.postMessage("print", "*");
        };
    </script>
</body>

</html>