micro-composer/iframe.html at master · multisolution/micro-composer · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Microfront Facade - IFRAME</title>
        <script>

            window.addEventListener (
                'increment',
                (ev) => {
                    console.log(`Composer received: ${JSON.stringify(ev.detail)}`)
                    console.log(ev.target)
                    console.log(ev.currentTarget)
                    repeater(ev)
                }
            )

            function repeater(ev) {
                var iframes = document.getElementsByTagName('iframe')
                for(var i = 0;  i < iframes.length; i++){
                    iframes[i].contentWindow.dispatchEvent(
                        new CustomEvent(
                            'increment',
                            {
                                detail : ev.detail
                            }
                        )
                    )
                }
            }

            function counter (val) {
                var dt = document.getElementById('total');
                dt.innerHTML = parseInt(dt.innerHTML)+val
                window.dispatchEvent(
                    new CustomEvent(
                        'increment',
                        { detail: { target: 'facade', value: dt.innerHTML, origin: 'composer' } }
                    )
                )
            }
        </script>
    </head>
    <body>
        <iframe src="http://localhost:8090/angular"></iframe>
        <iframe src="http://localhost:8090/vue"></iframe>
        <hr>
        <button onclick="counter(-1)" >-</button>
        <span id="total">0</span>
        <button onclick="counter( 1)" >+</button>
    </body>
</html>