通过 XML HttpRequest 加载时 OnClick() 函数不起作用

Posted 2023-03-05

【中文标题】通过 XML HttpRequest 加载时 OnClick() 函数不起作用

【英文标题】：OnClick() Functions not working when loaded through XML HttpRequest

【发布时间】：2019-12-06 05:22:42

【问题描述】：

我创建了一个重新加载 div 内容的 XML HttpRequest，方法是在其位置重绘 SVG 地图。在 SVG 地图中是缩放、平移和重置 javascript 函数的事件触发器。 map 和 javascript 函数都用 Java 写成字符串

加载的 JavaScript 还包含在悬停时工作的工具提示函数，因此错误显然与 onclick() 相关

XML HttpRequest：

var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function() 
                            if (this.readyState == 4 && this.status == 200) 
                               //select div with id map, replace this with ADMapYear.html and map as drawn in Eclipse/Java
                               document.getElementById("map").innerHTML = xhttp.responseText;
                               eval(document.getElementById("scriptLoad").innerHTML);
                            
                        ;
                        xhttp.open("GET", "/ADMapYear.html/"+year_selected, true);
                        xhttp.send();


JavaScript:

"function reset() \n" + 
                        "               for(var i = 0; i < 6; i++) \n" + 
                        "                   transformMatrix[i] = origMatrix[i];\n" + 
                        "                              \n" + 
                        "               var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";\n" + 
                        "               matrixGroup.setAttributeNS(null, \"transform\", newMatrix); \n" + 
                        "          \n" + 
                        "           ;"+

                        "function pan(dx, dy) "+
                            "transformMatrix[4] += dx;"+
                            "transformMatrix[5] += dy;"+

                            "var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";"+
                            "matrixGroup.setAttributeNS(null, \"transform\", newMatrix);"+
                        ""+

                        "function zoom(scale) "+
                            "for(var i = 0; i < 4; i++) "+
                                "transformMatrix[i] *= scale;"+
                            ""+

                            "transformMatrix[4] += (1-scale) * centerX;"+
                            "transformMatrix[5] += (1-scale)* centerY;"+

                            "var newMatrix = \"matrix(\"+ transformMatrix.join(' ') + \")\";"+
                            "matrixGroup.setAttributeNS(null, \"transform\", newMatrix);"+ 
                        ""

SVG：

<path class=\"button\" onclick=\"pan(0,25)\" d=\"M25 5 l6 10 a20 35 0 0 0 -12 0z\" style= \"fill: black;\"/>\n" + 
                                "       <path class=\"button\" onclick=\"pan(25,0)\" d=\"M5 25 l10 -6 a35 20 0 0 0 0 12z\" style= \"fill: black;\" />\n" + 
                                "       <path class=\"button\" onclick=\"pan(0, -25)\" d=\"M25 45 l6 -10 a20, 35 0 0, 1 -12,0z\" style= \"fill: black;\"/>\n" + 
                                "       <path class=\"button\" onclick=\"pan(-25,0)\" d=\"M45 25 l-10 -6 a35 20 0 0 1 0 12z\" style= \"fill: black;\"/>\n" + 
                                "       \n" + 
                                "       <circle class=\"button\" cx=\"25\" cy=\"20.5\" r=\"3\" onclick=\"zoom(1.25)\" style= \"fill: black;\"/>\n" + 
                                "       <circle class=\"button\" cx=\"25\" cy=\"29.5\" r=\"3\" onclick=\"zoom(0.8)\" style= \"fill: black;\"/>\n" + 
                                "       \n" + 
                                "       <g>\n" + 
                                "           <rect class=\"button\" x=\"12\" y=\"50\" width =\"30\" height=\"15\" onclick=\"reset()\" fill=\"#464647\"/>\n" + 

没有错误消息出现，只是在点击时不会缩放、平移或重置

【参考方案1】：

我认为不存在，因为该函数在绑定时不存在。我建议你在 XML HttpRequest 返回后绑定函数

编辑： 此外，您将响应放入一个元素中，然后评估另一个元素：

document.getElementById("map").innerHTML = xhttp.responseText;
eval(document.getElementById("scriptLoad").innerHTML);

应该变成：

document.getElementById("map").innerHTML = xhttp.responseText;
eval(document.getElementById("map").innerHTML);

另外，我建议您不要使用 eval，因为这会在您的代码中造成漏洞。为了避免 eval，您可以在 HttpResponse 中发送一个脚本文件并将其添加到您的代码中。

【讨论】：

感谢您的建议，不幸的是这没有奏效

只是为了确保我们发现了问题，请求后是否可以看到函数“缩放”和“平移”？我的意思是，如果你从控制台调用它们，它们可以工作吗？

我刚刚再次运行它，它指出缩放在控制台中未定义

【参考方案2】：

从 OnClick 调用 HTTPRequst 时，我也遇到了问题。我通过将被点击的元素（一个按钮）放在标签内来解决它。