postMessageとonmessage - liguofeng29’s blog

二つのwindowのHTML間でデータのやり取りを行うために用意されているAPI。

・targetWIndow.postMessage(message, targetOrigin)

・onmessage

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> 選択本表示 </title>
    <script type="text/javascript">
        var chooseBook = function() {
                // window表示
                var targetWin = window.open('http://localhost:8080/postmessage/chooseBook.html', '_blank', 'width=510,height=300');
                // ロード完了時
                targetWin.onload = function() {
                    var data = [{
                        name: "java",
                        price: 100
                    }, {
                        name: "android",
                        price: 200
                    }, {
                        name: "c",
                        price: 2000
                    }];

                    // 送信
                    targetWin.postMessage(data, "http://localhost:8080");
                }
            }
            // データ取得時
        window.onmessage = function(ev) {
            // http://localhost:8888のメッセージのみ処理
            if (ev.origin != "http://localhost:8080") {
                return;
            }
            var show = document.getElementById("result");
            // 显示消息
            show.innerHTML = ("選択した本：<br/>" + "書籍名：" + ev.data.name + "<br/>" + "価格：" + ev.data.price);
        };
    </script>
</head>

<body>
    <a href="#" onclick="chooseBook();">本一覧表示</a>
    <div id="result"></div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>本選択</title>
    <style type="text/css">
        body>table {
            width: 480px;
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        var srcWin, srcOrigin;
        var chooseItem = function(td) {
            var currentRow = td.parentNode.parentNode;
            srcWin.postMessage({
                name: currentRow.cells[0].innerHTML,
                price: currentRow.cells[1].innerHTML
            }, srcOrigin);
            window.close();
        };
        window.onmessage = function(ev) {
            // http://localhost:8888のメッセージのみ処理
            if (ev.origin != "http://localhost:8080") {
               alert(ev.origin);
                return;
            }
            srcWin = ev.source;
            srcOrigin = ev.origin;
            // データ取得
            var books = ev.data;
            var bookTb = document.getElementById("bookTb");
            for (var i = 0; i < books.length; i++) {
                var row = bookTb.insertRow(i);
                row.insertCell(0).innerHTML = books[i].name;
                row.insertCell(1).innerHTML = books[i].price;
                row.insertCell(2).innerHTML = "<input name='choose' type='radio'" + " onclick='chooseItem(this);'/>";
            }
        };
    </script>
</head>

<body>
    <table>
        <tr>
            <th>書籍名</th>
            <th>価格</th>
            <th>選択</th>
        </tr>
        <tbody id="bookTb"></tbody>
    </table>
</body>

</html>

f:id:liguofeng29:20160218000846g:plain