chrome-app无法识别在Chrome浏览器运行时工作正常的ID

Question

我正在将基于标准浏览器的应用转换为Chrome应用。

页面加载后，它已经出现错误 - 未捕获的TypeError：无法调用null的方法'appendChild'。这是在几百行JS完成工作之后发生的，但它是代码第一次引用文档对象，特别是document.getElementById（'mainDiv'）。appendChild（...）。

我可以在调试器元素选项卡中清楚地看到带有id =“mainDiv”的div。但是，document.getElementById（'mainDiv'）必须返回null。任何放入断点的尝试都会失败，因为它们会被忽略。我已将它们添加到失败的行以及导致它的行，并且永远不会触发断点。我已经阅读了SO上的一些线程，我确定断点问题只是调试器中的一个错误，但是当我能够清楚地看到它并且在浏览器中运行的代码工作正常时不能识别id会让我感到疑惑这是怎么回事。浏览器中的文档是否与应用程序版本中的文档不同？

有什么想法吗？

如果我选择“检查背景页面”，断点可以正常工作，但它仍然会以不同的方式失败。元素选项卡不显示我的html页面，但伪生成的背景一，我无法让调试器显示我的页面。

任何启蒙都会受到赞赏。我搜索并阅读了我能找到的内容，但很多文档显然已经过时了。

Answer 1

您似乎正在访问后台页面的document对象，而不是POS.html文件的对象。

试试这个：

chrome.app.window.create('POS.html',{
    'bounds': { 
        'width': screen.availWidth, 
        'height': screen.availHeight 
    } 
}, function(appWin) {
    var pageWindow = appWin.contentWindow;
    var pageDocument = pageWindow.document;

    pageWindow.addEventListener('load',function() {
        // now use 
        pageDocument.getElementById('yourid');

        // instead of
        document.getElementById('yourid');
    },false);

});

另外，要检查页面中的元素，请右键单击应用程序窗口中的任意位置，然后选择Inspect Element（仅当应用程序作为“解压缩的扩展程序”加载时才有效）

或者，您可以导航至chrome://extensions，然后点击应用条目旁边的页面链接。

Answer 2

正如lostsource所提到的，你可能正在访问错误的DOM文档。您应该考虑在不同的全局上下文中运行的应用程序中的javascript，每个页面一个。 （至少）背景页面的页面和每个窗口的页面。

这些页面中的每一个都在其自己的全局上下文中运行。这意味着document和window等全局变量不同。

在后台页面中将是您通过后台清单标记加载的脚本。当您打开一个窗口时，它也可以通过脚本标记加载自己的脚本（确保您不使用内联或阻止脚本标记，但使用script src="foo.js"。请参阅http://developer.chrome.com/apps/contentSecurityPolicy.html）。

在chrome.app.window.create回调中运行的代码在后台页面的上下文中运行，因此其document变量用于后台页面的DOM，通常为空。相反，您可以使用win.contentWindow作为lostsource建议引用窗口的DOM，或者添加包含脚本的page.js文件，并通过script src='page.js'标记从页面中包含它。

Answer 3

您的通话是在加载事件发生后发生的，例如JS在window.onload上设置了一个函数？