2

ユーザーがiframe内から要素を操作できるようにするGoogleChrome用のアプリケーションを作成しています（対象読者は内部チームです）。ユーザーはマウスを使用してDOM要素を選択し、色やフォントの変更など、さまざまなアクションを実行できます。

nodeIteratorIDまたはクラス名を持つ要素のみを選択するメソッドを使用しています。次に、これらの要素ごとに、要素固有のプロパティをオブジェクトに追加し、そのオブジェクトを配列にプッシュします。次に、IndexedDBデータベースを開き、配列内の各オブジェクトをデータベースに追加します。

私の問題はこれです：オブジェクトに要素への参照を含めない限り、すべてが正常に機能します。

// Works fine
array.push({
     width : currentNode.offsetWidth,
    height : currentNode.offsetHeight,
       top : currentNode.style.top;
      left : currentNode.style.left;
});

// Doesn't work
array.push({
      elem : currentNode,
     width : currentNode.offsetWidth,
    height : currentNode.offsetHeight,
       top : currentNode.style.top;
      left : currentNode.style.left;
});

IndexedDBストアに最初の要素を追加しようとした後、Google Chromeはサイレントに失敗します（コンソールには何も表示されません）。

私の質問はこれです：他の誰かがこの振る舞いを経験しましたか、そしてこれはブラウザ特有のバグですか？

明日、コードをJSfiddleに蒸留します。前もって感謝します。

4

3 に答える 3

4

IndexedDBは、オブジェクトの構造化クローンを格納します。基本的に、データはJSONオブジェクトに変換されます。これらは、要素またはノードのデータ型を除外します。

ただし、黙って失敗することは予期された動作ではありません。構造化クローンアルゴリズムに従って、DataCloneErrorをスローする必要があります。

于 2012-10-12T23:29:19.033 に答える
1

DOM要素を保存する必要がありますか？DOM要素のIDを保存し、そのIDで要素を取得することはできますか？

indexeddbは、循環参照を持たないデータのみを格納できます。試すことができることが1つあるかもしれません。少し前に、関数をJSONにシリアル化および逆シリアル化する方法についてのブログ投稿を書きました。これは役立つかもしれませんが、他に選択肢がない場合を除いて、完全な要素を保存しないことをお勧めします。これにより、データベースに多くの不要なデータが追加され、JSONにシリアル化するときに情報が失われる可能性があります。

于 2012-10-13T06:20:25.263 に答える
0

put（）自体からchrome（Chrome 23で試したばかり）で例外を取得する必要があります。つまり、onerrorハンドラーがある場合、例外が最初に呼び出されるため、例外は呼び出されません。

つまり、あなたが持っている場合

req = db.transaction("foo", "readwrite").objectStore("foo").put({...data with dom nodes })
req.onsuccess = ...
req.onerror = ...

例外は最初の行でスローされます。

于 2012-10-18T19:02:13.797 に答える