Question

给定输入元素......

<input type="text" />

和这个javascript ...

    var x = document.body.innerHTML;

用户输入一个值，说＆＃34; myValue＆＃34;，并导致x被设置

IE将设置x =

<input type="text" value="myValue" />

Chrome将设置x =

<input type="text" />

那么，是否有任何跨浏览器替代document.body.innerHTML？

Answer 1

Chrome应该支持它 - http://www.quirksmode.org/dom/w3c_html.html - 您确定使用的是最新版本吗？

Answer 2

这看起来像跨浏览器一样。 javascript函数执行此操作...

使用用户输入的值设置每个表单input / select / textarea的值/ selected / html属性
创建一个名为“formContent”的新输入元素
将“formContent”的值设置为表单元素的编码值（包括用户输入的值）
将“formContent”元素添加到表单
将包含用户输入的值的表单提交给

这是我的例子的来源......

<html>
<head>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
    function submitFormWithValues() {
        $('form input').each(function() {
            this.setAttribute('value', this.value);
            if (this.checked)
                this.setAttribute('checked', 'checked');
            else
                this.removeAttribute('checked');
        });

        $('form select').each(function() {
            var index = this.selectedIndex;
            var i = 0;
            $(this).children('option').each(function() {
                if (i++ != index)
                    this.removeAttribute('selected');
                else
                    this.setAttribute('selected', 'selected');
            });
        });

        $('form textarea').each(function() {
            $(this).html($(this).val());
        });

        alert(encodeURI($("form").html()));

        var myInput = document.createElement("input"); 
        myInput.type = "text";
        myInput.setAttribute("name", "myInput");
        myInput.setAttribute("value",encodeURI($("form").html()));

        var myForm = document.getElementById("form1");
        myForm.appendChild(myInput);
        myForm.submit;            
    }
</script>
</head>
<body id="body">
<form id="form1" action="test.aspx" method="post">
<input type="text" id="input1" /><br />
<input type="text" id="input2" /><br />
<input type="submit" onclick="this.style.visibility='hidden', submitFormWithValues()" id="submit" value=" Submit " />
</form></body></html>

提交页面时，表单看起来与此类似......

<form id="form1" action="test.aspx" method="post">
<input type="text" id="input1" /><br />
<input type="text" id="input2" /><br />
<input type="text" name="formContent" value=" %3CINPUT%20id=input1%20value=%22first%20value%22%20jQuery1385425785747=%222%22%3E%3CBR%3E%3CINPUT%20id=input2%20value=%22second%20value%22%20jQuery1385425785747=%223%22%3E%3CBR%3E%3CINPUT%20style=%22VISIBILITY:%20hidden%22%20id=submit%20onclick=%22this.style.visibility='hidden',%20submitFormContent()%22%20value=%22%20Submit%20%22%20type=submit%20jQuery1385425785747=%224%22%3E%20" />
</form>

接收页面（下面的C＃示例）通过解码formContent的值来重建HTML表单元素。

using System;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {   
        Response.Write(Server.UrlDecode(Request.Form.Get("formcontent")));
    }
}

接收页面将输出原始表单元素，包括用户输入的值。通过这种方式，输入的表单和任何值可以独立于浏览器功能从一个页面传递到另一个页面。

跨浏览器替代document.body.innerHTML

2 个答案: