2

我正在将运行良好的基于​​标准浏览器的应用程序转换为 chrome 应用程序。

页面加载后，它已经遇到错误 - Uncaught TypeError: Cannot call method 'appendChild' of null。这发生在几百行 JS 完成它们的工作之后，但这是代码第一次引用文档对象，特别是 document.getElementById('mainDiv').appendChild(...)。

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

有任何想法吗？

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

任何启示将不胜感激。我已经搜索并阅读了我能找到的内容，但很多文档显然已经过时了。

4

3 回答 3

2

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

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

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

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

于 2013-08-06T01:35:16.650 回答
2

您似乎正在访问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并单击应用条目旁边的页面链接。

显示如何调试 Chrome 打包应用程序 HTML 窗口的图像

于 2013-08-05T23:04:40.113 回答
0

您的调用是否在加载事件之后发生，例如在 window.onload 上设置的函数中调用的 JS？

于 2013-08-05T20:38:02.237 回答