Javascript 按钮将内容添加到其他页面

我正在尝试用HTML、CSS和Javascript制作一个POS系统。 我目前有一个网站，将库存加载到iframe中，我希望iframe中的按钮将其信息（如“名称、价格、金额等”）添加到另一个div中。 这可能吗

我已经厌倦了把目标和其他东西联系起来，但什么都没用

索引页：

<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>

函数add_rynkeby（）{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“Rynkeby”）；
node.appendChild（textnode）；
document.getElementById（“myList”）.appendChild（节点）；
}
函数add_cocio（）{
var节点=document.createElement（“LI”）；
var textnode=document.createTextNode（“Cocio”）；
node.appendChild（textnode）；
document.getElementById（“myList”）.appendChild（节点）；
}
函数删除（）{
var list=document.getElementById（“myList”）；
list.removeChild（list.childNodes[0]）；
}
函数重置（）{
var list=document.getElementById（“myList”）；
while（list.hasChildNodes（））{
list.removeChild（list.firstChild）；
}
}
伦比

---

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

要使iframe中的页面与父页面通信信息，请使用postMessageAPI。MDN页面正在运行，但搜索“postmessageAPI”将显示许多指南

总的想法是：

• 单击按钮时，iframed页面的JS会发送一条消息
• 父页面的JS侦听消息，并在识别到来自iframe的接收消息时以某种方式作出响应

---

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

不是

的有效子级。除此之外，“它不起作用”一词实际上毫无意义。发生了什么…抛出了什么错误？您需要将此范围缩小到代码中更具体的部分，并提供基本的调试细节，以实现StackOverflow！