本文探讨了在Firefox浏览器中通过JavaScript动态创建并提交表单时遇到的兼容性问题。由于Firefox要求页面具备完整的HTML结构，直接append创建的form可能无法正确提交。解决方案是将动态生成的form元素先添加到页面的body标签内，再执行submit()方法，从而确保在Firefox及其他主流浏览器中都能成功提交参数。
Firefox中JS动态创建表单提交失败的解决方案
在前端开发中，有时需要通过JavaScript动态生成表单并提交参数。常见的做法是创建form元素，将所需参数作为input添加进去，然后调用submit()方法提交。以下是初始的实现代码：
Js代码:
初始实现代码如下：
function loadConfig(gameUrl, skinId) {
var temp = document.createElement("form");
temp.action = "${createLink(controller:'mobileConfig', action:'beforeLaunchConfig')}";
temp.method = "POST";
temp.style.visibility = "hidden";
var opt = document.createElement("input");
opt.name = "gameUrl";
opt.id = "gameUrl";
opt.value = gameUrl;
var opt2 = document.createElement("input");
opt2.name = "skinId";
opt2.id = "skinId";
opt2.value = skinId;
temp.appendChild(opt);
temp.appendChild(opt2);
temp.submit();
} 上述代码在Chrome和Safari浏览器中运行正常，但在Firefox（如版本17.0.1）中提交会失败。经过排查发现，Firefox在提交表单时，要求该表单必须存在于完整的HTML文档结构中（即包含<html>, <head>, <body>等标签）。如果动态创建的form没有被正确挂载到文档流中，Firefox可能无法正确处理提交动作。因此，需要对代码进行微调：
Js代码:
修正后的代码如下：
function loadConfig(gameUrl, skinId) {
var pageDiv = document.getElementById("page");
var temp = document.createElement("form");
temp.action = "${createLink(controller:'mobileConfig', action:'beforeLaunchConfig')}";
temp.method = "POST";
temp.style.visibility = "hidden";
temp.name = "loadConfigPage";
var opt = document.createElement("input");
opt.name = "gameUrl";
opt.id = "gameUrl";
opt.value = gameUrl;
var opt2 = document.createElement("input");
opt2.name = "skinId";
opt2.id = "skinId";
opt2.value = skinId;
temp.appendChild(opt);
temp.appendChild(opt2);
pageDiv.appendChild(temp);
temp.submit();
} 关键修改在于，在调用submit()之前，先将动态创建的form元素追加到页面的body（或指定容器div）中。这样确保了form存在于文档结构中，从而在Firefox中也能成功提交。