0

我正在尝试开发一个对正在加载或更新的页面做出反应的 chrome 扩展。扩展程序将自身呈现iframe为避免来自页面 CSS 的干扰。当我在启用了 Google Instant 的 Google 搜索结果页面上运行它时，我看到控件最初呈现正确，但是当查询和查询结果被修改时，控件仅重新呈现部分。正确检测到事件，但 DOM 未更新。我将问题隔离到以下代码，该代码被调用以重新渲染扩展 UI：

function updatePanel() {
    console.log("updatePanel called");
    var $container = getPanel();
    var $preview = $container.find('iframe').contents().find('div');

    console.log('clearing preview div',$preview);
    $preview.empty();

    $preview.append($('<div>').text(content("div")));

    var $table = $('<table border="2" cellspacing="0" cellpadding="0">'); 
    var $cell = $('<td>');
    $table.append($('<tr>').append($cell));

    $cell.append($('<div>').text(content("table"))); // Line A
    $preview.append($table); // Line B

    console.log('widget is done, generated html:',$cell);
    return true;
}

如果带有注释的行//Line B移到 前面//Line A，则表的内容将无法呈现。如果//Line B跟随//Line A，一切都会正确呈现。然而在这两种情况下，生成的 DOM 应该是相同的。

一个相关的错误是我无法将 jQuery 动画应用于表格的内容，因为随后对 DOM 的所有修改都Line B无法应用。

这是一个记录在案的错误吗？我正在当前版本的 Chrome（版本 26.0.1410.64 m）中进行测试。

编辑 2013 年 5 月 18 日：

抱歉，我忘记包含以下content(label)功能：

function content(label) {
    return label + ": " + (new Date()).getTime();
}
4

0 回答 0