javascript - HTML / javascript 根据用户输入动态创建不同的消息回复

Question

抱歉标题令人困惑，我不太确定如何更好地命名。

无论如何，我正在处理一个在其 iframe 子级之间接收和发送数据的 postmessage 接口。它基本上发送非常简单的消息：iframe 中与游戏相关的分数或保存/加载请求。

我正在尝试做的是使用户可以使用 concat 方法一次拥有多个保存“文件”。我基本上是将单独的保存状态与一个分隔符组合成一个大字符串，并在我需要访问它们以进行加载请求时将它们分开。

以下是我目前处理来自游戏的保存请求的方式：

            var states = JSON.stringify(data.gameState);
            var newstate = {state: gameState};
            var savesArray = savestring.split("||");
            savesArray.unshift(newstate);
            if (savesArray.length > 5){
                savesArray.pop();
            }
            var state = savesArray.join("||");

然后我将“状态”发送回数据库。我遇到的问题是如何让用户决定他想要选择打开的 0-5 个保存文件中的哪一个（=> 作为加载请求发回）。

我目前正在做的一种完全避免问题的方法是使用发送第一个状态

var first_state = loaded_state.split("||")[0];

但我想知道是否有任何巧妙的方法可以在父 HTML 中收到加载请求时为用户提供按钮框/div，其中按钮决定将哪个索引保存状态发送回 iframe。我遇到的最大问题是如何正确构建按钮以动态通信和发送加载请求。

我已经有一个函数，可用于页面中的其他内容以动态创建按钮，但我不能 100% 确定我是否可以使用它来满足我的需求，或者它是否是最好的方法.

        function play(name, URL) {
        var element = document.createElement("button");

        //Assign different attributes to the element.
        element.setAttribute("value", URL);
        element.setAttribute("id", "gamebutton");
        element.innerHTML = name;
        element.setAttribute("style", "display:block");
        element.setAttribute("class", "btn btn-success btn-block");
        element.onclick = function () {
            document.getElementById("iframeID").src = this.getAttribute("value");
            document.getElementById("iframeID").width = "95%";
            document.getElementById("iframeID").height = "750 px";
            document.getElementById("iframeID").style.display = "block";

            document.getElementById("hiddenScore").style.display = "block";
            var gameelement = document.getElementById("gamediv");
            gameelement.style.display = "block";

            var miscarea = document.getElementById("misc_div");
            miscarea.style.display = "none";
        };

我想把它做成一个模态框，但是我是否能够顺利地创建我需要的按钮的不确定性让我犹豫是否要加倍努力进行多次保存.

编辑：

这就是将消息发送回 iframe 的方式。如您所见，能够为每个索引创建按钮 (var first_state = loaded_state.split("||")[0];) 意味着所有按钮的代码都是相同的

 $.ajax({
            type: "GET",
            url: "{% url 'get_detail_game_instance' game.pk %}",
            beforeSend: function (xhr, settings) {
                $.ajaxSettings.beforeSend(xhr, settings);
            },
            success: function (data) {
                var loaded_state = JSON.parse(data.state);
                var first_state = loaded_state.split("||")[0];
                console.log(loaded_state);
                var message = {
                    "messageType" : "LOAD",
                    "gameState" : first_state
                };

                event.source.postMessage(message, eventSave.origin);
            },
            failure: function (errMsg) {
                console.log(errMsg);
            }
        });

事件是通过一个简单的事件监听器接收的，事件数据包含它是否是一个分数、加载或保存请求

标签： javascripthtml