Question

每次用户提供JSON文件时，我都会尝试动态创建一个函数。在窗体的onSubmit事件中调用以下函数。

我看不到这段代码有效。在调试时，我看到额外的元素出现在HEAD部分，但是一旦函数调用结束，它就会消失。

但是，如果我在JS文件中显式调用函数createType（），它就可以工作。但我的要求是只应在按钮点击时调用函数createType，并应动态创建函数。

function createType() {
  var jsonString = document.getElementById("json").value;
  var obj = JSON.parse(jsonString)
  var script = document.createElement("script");
  script.innerHTML = "function Friend(){ ";
  for (var i = 0; i < obj.fields.length; i++) {
    if (obj.fields[i].name != "") {
      alert(obj.fields[i].name);
      script.innerHTML += "var " + obj.fields[i].name + ";" +
        "this.get=function(){ alert('test');}";


    }
  }
  script.innerHTML += "}";

  document.head.appendChild(script);
}
var firstFriend = new Friend();
firstFriend.get(); // should trigger an alert box.

最后两行会抛出错误，因为新的脚本标记包含“朋友”功能。在任何地方都找不到。

即使从按钮点击事件调用了createType（），我希望附加的脚本保留在HEAD / BODY中。

Answer 1

在表单的onSubmit事件中调用以下函数。

我看不到这段代码有效。在调试时，我看到额外的元素出现在HEAD部分，但是一旦函数调用结束，它就会消失。

您正在运行脚本，然后表单正在提交，这会导致重新加载页面。该脚本无法在新页面上运行，因此更改不再存在。

您需要在事件对象上调用.preventDefault()以停止完成表单提交。

如果您需要提交表单，那么您还需要使用Ajax替换常规提交，或者根据加载页面时提交的数据更改您的方法并触发JS。

使用innerHTML的Javascript无法在HEAD中添加脚本标记

1 个答案: