javascript - 将内容添加到其他页面的按钮

Question

我正在尝试使用 HTML、CSS 和 Javascript 制作一个 POS 系统。我目前有一个将库存加载到 iframe 的网站，我希望 iframe 中的按钮可以添加它们的信息，例如“名称、价格、数量等”。到另一个分区。这可能吗？

我已经厌倦了链接目标等，但没有任何效果。

索引页:

<wrapper>
    <div id="category">
        <a href="øl_soda.html" target="iframe1">
            <input type="button" class="categories_button" value="Øl/Soda" />
        </a>
        <a href="drinks.html" target="iframe1">
            <input type="button" class="categories_button" value="Drinks" />
        </a>
        <a href="shot.html" target="iframe1">
            <input type="button" class="categories_button" value="Shots" />
        </a>
        <a href="diverse.html" target="iframe1">
            <input type="button" class="categories_button" value="Diverse" />
        </a>
    </div>

    <iframe name="iframe1" id="inventory" src="velkommen.html">
    </iframe>

    <div id="checkout">
        <ul id="myList">
            <li>
                Ja
            </li>
        </ul>

        <button onclick="remove()">Remove</button>
        <button onclick="reset()">Reset</button>
    </div>
</wrapper>

在 iframe 中打开网站:

<script>
    function add_rynkeby() {
        var node = document.createElement("LI");
        var textnode = document.createTextNode("Rynkeby");
        node.appendChild(textnode);
        document.getElementById("myList").appendChild(node);
    }

    function add_cocio() {
        var node = document.createElement("LI");
        var textnode = document.createTextNode("Cocio");
        node.appendChild(textnode);
        document.getElementById("myList").appendChild(node);
    }

    function remove() {
        var list = document.getElementById("myList");
        list.removeChild(list.childNodes[0]);
    }
</script>

<script>
    function reset() {
        var list = document.getElementById("myList");
        while (list.hasChildNodes()) {
            list.removeChild(list.firstChild);
        }
    }
</script>

<wrapper>

    <button onclick="add_rynkeby()" class="inventory_button" target="index.html">Rynkeby</button>

</wrapper>

因此，我希望 iframe 站点中的按钮将其名称显示到索引页上的“结帐”div 中。

Answer 1

要让 iframe 中的页面向父页面传达信息，请使用 postMessage API。 MDN 页面是 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage但是搜索“postmessage api”会出现很多指南。

总体思路是:

• 点击按钮时 iframed 页面的 JS 发送消息
• 父页面的 JS 监听消息，并在将收到的消息识别为来自 iframe 时以某种方式做出响应

“将收到的消息识别为来自 iframe”是一个重要的安全点:您需要进行设置，以便父页面只信任您希望它信任的消息。大多数 API 指南都会涵盖这一点。