Javascript 代码在 IE11 中有效但在 Chrome 中无效

Question

IE11/Chrome 我们遇到了一个奇怪的问题。我们有这个小代码：

divFrmPost = document.getElementById('divFormPost'); 
divFrmPost.innerHTML = '<form name="formPost" method="post" \ action="http://someurl/servlet/myapp"> \    
    <input type="hidden" id="cd_user" name="cd_user" value="John Doe"> \    
    <input type="hidden" id="cod_user" name="cod_user" value="5013"> \    
    <input type="hidden" id="login" name="login" value="jdoe"> \    
    <input type="hidden" id="pwd" name="pwd" value="123456"> \    
    <input type="hidden" id="profile" name="profile" value="12"> \   
    <input type="hidden" id="" name="" value="128"> \
</form>'; 
frmPost = document.getElementById('formPost');
frmPost.submit();

当我们在 IE11 中运行时，表单处理正常，但是当我们在 Chrome (v44) 中运行时，它什么也不做，在控制台中我们有这个错误：

Uncaught TypeError: Cannot read property 'submit' of null

我们理解问题一定是最后一个隐藏字段，没有id/name，但为什么它在IE11中有效而在Chrome中无效？

编辑: 原代码中innerHTML的构造是单行的，为了更好的阅读，我编辑了它，但是我忘了加反斜杠。

EDIT2：拜托，让我们避免评论 war...

Answer 1

改变

name="formPost"

到

id="formPost"

或使用

getElementsByName();

您的代码将是

 divFrmPost = document.getElementById('divFormPost'); 
divFrmPost.innerHTML = '<form id="formPost" method="post" action="http://someurl/servlet/myapp">    
    <input type="hidden" id="cd_user" name="cd_user" value="John Doe">    
    <input type="hidden" id="cod_user" name="cod_user" value="5013">    
    <input type="hidden" id="login" name="login" value="jdoe">    
    <input type="hidden" id="pwd" name="pwd" value="123456">    
    <input type="hidden" id="profile" name="profile" value="12">    
    <input type="hidden" id="" name="" value="128">
</form>'; 
frmPost = document.getElementById('formPost');
frmPost.submit();

Answer 2

让它发挥作用

首先我们必须编辑代码以使其工作：正如其他人所说，您正在寻找 id，但在表单上只有名称集和 Chrome，而其他真正的浏览器不喜欢它。

divFrmPost = document.getElementById('divFormPost');
divFrmPost.innerHTML = '<form id="formPost" method="post" action="http://someurl/servlet/myapp">'    
   + '<input type="hidden" id="cd_user" name="cd_user" value="John Doe">'    
   + '<input type="hidden" id="cod_user" name="cod_user" value="5013">'    
   + '<input type="hidden" id="login" name="login" value="jdoe">'    
   + '<input type="hidden" id="pwd" name="pwd" value="123456">'    
   + '<input type="hidden" id="profile" name="profile" value="12">'    
   + '<input type="hidden" id="" name="" value="128">'
+'</form>';
frmPost = document.getElementById('formPost');
frmPost.submit();

<div id="divFormPost"></div>

多行字符串

要在多行上连接一个字符串，您应该使用 +

为什么它适用于 IE？

这里是答案

getElementById method < IE 8

Returns a reference to the first object with the specified value of the ID or NAME attribute.

来自MSDN Microsoft getElementById method

也许因为 this 它在 IE 11 上对你有用，如果你没有定义 <!DOCTYPE> IE 启用 Quirks 模式

Quirks mode emphasizes compatibility over standards compliance by supporting behavior found in earlier versions of Internet Explorer.

Answer 3

两个问题：

您不能通过传统的字符串表示法将字符串拆分为多行。我把它改成了 Template String。您可以在行尾添加 + 以实现 IE 兼容性。
您的表单没有 ID。所以我添加了它。 <form id="formPost" name="formPost" ...

这是工作代码：

        divFrmPost = document.getElementById('divFormPost'); 
        divFrmPost.innerHTML = `<form id="formPost" name="formPost" method="post" action="http://someurl/servlet/myapp">;    
            <input type="hidden" id="cd_user" name="cd_user" value="John Doe">    
            <input type="hidden" id="cod_user" name="cod_user" value="5013">    
            <input type="hidden" id="login" name="login" value="jdoe">    
            <input type="hidden" id="pwd" name="pwd" value="123456">    
            <input type="hidden" id="profile" name="profile" value="12">    
            <input type="hidden" id="" name="" value="128">
        </form>`; 
        frmPost = document.getElementById('formPost');
        frmPost.submit();

Javascript 代码在 IE11 中有效但在 Chrome 中无效

Javascript code working in IE11 but not in Chrome

javascript

google-chrome

internet-explorer-11

让它发挥作用

多行字符串

为什么它适用于 IE？