document.body.innerHTML的跨浏览器替代方案

Cross browser alternative to document.body.innerHTML

本文关键字：方案 浏览器 body innerHTML document      更新时间：2023-09-26

给定一个输入元素。。。

<input type="text" />

这个javascript。。。

    var x = document.body.innerHTML;

用户输入一个值，比如"myValue"，并将x设置为

IE将设置x=

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

而Chrome将设置x=

<input type="text" />

那么，除了document.body.innerHTML，还有什么跨浏览器的替代方案吗？

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

这看起来像是跨浏览器工作的。javascript函数可以做到这一点…

  • 使用用户输入的值设置每个表单输入/select/text区域的值/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")));
    }
}

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

相关文章：