Question

很抱歉这个令人困惑的标题，我不太清楚我应该如何更好地命名。

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

我尝试做的是让用户可以拥有多个保存＆＃34;文件＆＃34;立刻，使用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("||");

然后我发送＆＃39;州＆＃39;回到数据库。我遇到的问题是如何让用户决定他想要选择打开哪个0-5保存文件（=＆gt;作为加载请求发回）。

我现在正在做的是一种完全避免问题的方法是使用

发送第一个状态

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（＆＃34; ||＆＃34;）[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);
            }
        });

通过简单的eventlistener接收事件，事件数据包含它是否为分数，加载或保存请求

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

0 个答案: