2

正常に動作している標準のブラウザー ベースのアプリをクロム アプリに変換しています。

ページがロードされると、すでにエラーが発生しています - Uncaught TypeError: Cannot call method 'appendChild' of null. これは、JS の数百行がジョブを実行した後に発生しますが、コードがドキュメント オブジェクト、具体的には document.getElementById('mainDiv').appendChild(...) を参照するのはこれが初めてです。

デバッガー要素タブで id="mainDiv" の div をはっきりと見ることができます。それでも、document.getElementById('mainDiv') は null を返す必要があります。ブレークポイントを設定しようとすると、無視されるため失敗します。失敗した行とそれにつながる行にそれらを追加しましたが、ブレークポイントは決してトリガーされません。SO のいくつかのスレッドを読んだことがありますが、ブレークポイントの問題はデバッガーの単なるバグであると確信していますが、ID をはっきりと確認できるときに ID を認識せず、ブラウザーで実行したときにコードが正常に動作するので、疑問に思います。どうしたの。ブラウザのドキュメントとアプリ版のドキュメントは違うのですか?

何か案は？

「バックグラウンド ページの検査」を選択すると、ブレークポイントは機能しますが、別の方法で失敗します。要素タブには HTML ページが表示されませんが、疑似生成された背景ページが表示され、デバッガーにページを表示させることができません。

任意の啓発をいただければ幸いです。見つけたものを検索して読みましたが、ドキュメントの多くは明らかに古くなっています。

4

3 に答える 3

2

lostsource が述べたように、間違った DOM のドキュメントにアクセスしている可能性があります。各ページに 1 つずつ、さまざまなグローバル コンテキストで実行されるアプリの JavaScript について考える必要があります。(少なくとも) 背景ページ用のページと各ウィンドウ用のページがあります。

これらの各ページは、独自のグローバル コンテキストで実行されます。これはdocument、 とのようなグローバル変数windowが異なることを意味します。

バックグラウンド ページには、バックグラウンド マニフェスト タグを介してロードするスクリプトがあります。ウィンドウを開くと、スクリプト タグを介して独自のスクリプトをロードすることもできます (インラインまたはブロック スクリプト タグを使用しないでください。使用してください。 http://developer.chrome.com/apps/contentSecurityPolicy.htmlscript src="foo.js"を参照してください)。

コールバックで実行されるコードは、バックchrome.app.window.createグラウンド ページのコンテキストで実行されるため、そのdocument変数はバックグラウンド ページの DOM 用であり、通常は空です。代わりに、lostsource が提案するように使用してウィンドウの DOM を参照させるwin.contentWindowか、スクリプトを含む page.js ファイルを追加し、script src='page.js'タグを介してページから含めることができます。

于 2013-08-06T01:35:16.650 に答える
2

documentPOS.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 など、load イベントの後に呼び出しが発生していますか?

于 2013-08-05T20:38:02.237 に答える