Question

调试一个在Opera浏览器中无法运行的复杂的基于jQuery的应用程序，我追溯到这个问题，当我在jQuery UI Dialog小部件中加载一些HTML时，Opera正在破坏我的DOM树。这是HTML模板（根据W3C Validator的有效HTML 4.0.1片段）：

<form action="" method="post">
    <p>Form starts here.</p>
    <p><input type="text" size="30" value="input in paragraph"></p>
    <table>
    <tr>
        <td><input type="text" size="30" value="input in table"></td>
    </tr>
    </table>
    <p>Form ends here.</p>
</form>

...这是Opera看到的生成的HTML：

<p class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 230px" scrolltop="0" scrollleft="0">
    <form action="" method="post">
        <p>Form starts here.</p>
        <p><input type="text" size="30" value="input in paragraph"/></p>
    </form>
    <table>
        <tbody>
            <tr>
                <td><input type="text" size="30" value="input in table"/></td>
            </tr>
        </tbody>
    </table>
    <p>Form ends here.</p>
</p>

我写了一个小测试用例。您应该将HTML模板“form.html”保存在与此HTML文档相同的目录中：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- UTF-8 sin BOM (€ÁÑ) -->
<html>
<head><title>Bug DOM Opera</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style type="text/css"><!--
*{
    font-size: 10pt !important;
    font-family: sans-serif;
}
h1{
    font-size: 12pt !important;
}
form{
    margin: 0.25em 0;
    padding: 0.25em;
    border: 1px solid black;
}
input{
    background-color: #C77C7A;
}
form input{
    background-color: #7CC592;
}
--></style>
<script type="text/javascript"><!--
jQuery(function($){
    // Open form in dialogue on button click
    $("button").click(function(){
        var $dialogo = $('<p>No data yet</p>')
            .dialog({
                modal: true,
                width: 500,
                height: 300,
                close: function(){
                    $(this).dialog("destroy");
                }
            }).dialog("open");
        $.ajax({
            url: "form.html",
            dataType: "html",
            success: function(data, textStatus, XMLHttpRequest){
                $dialogo.html(data);
            }
        });
    });

    // Open form on load (no dialogue)
    $("<div></div>").appendTo("body").load("form.html");
});
//--></script>
</head>
<body>

<h1>Bug DOM Opera</h1>
<p><button>Open dialogue</button></p>

</body>
</html>

如果你在Opera中运行它，你会看到你可以使用常规AJAX注入HTML模板，一切都很好（由<input>元素中的绿色背景显示）。但是，如果将其注入Dialog小部件，则DOM结构会更改（红色背景）。它在Firefox，Chrome和Internet Explorer中按预期工作。

我是否忽略了代码中的错误？我是否在Opera或jQuery UI中遇到过错误？

Answer 1

经过长时间的调查，我可以告诉你这是当前Opera版本中的一个歌剧错误。

Jquery的html方法说：

此方法使用浏览器的innerHTML属性。有些浏览器可能不生成完全复制所提供的HTML源的DOM。例如，版本8之前的Internet Explorer将转换所有链接到绝对URL和Internet Explorer先前的href属性没有版本9将无法正确处理HTML5元素添加单独的兼容层。

但是歌剧没什么。我目前正在使用opera stable 11.51而且我有你讲的bug。但是如果你使用Opera 12.00 alpha的Opera Next。您可以在此处下载：http://my.opera.com/desktopteam/blog/

它正常工作。

所以我不知道如何为当前版本的Opera修复它...但我们知道这是当前Opera版本的innerhtml的错误：）

希望它能为您提供帮助，并希望您能找到解决方案，使其适用于当前Opera的稳定版本。

Opera在对话框中破坏了HTML

1 个答案: