6

I have an <object> tag on a web page, whose data attribute is changed programmatically in JS (jQuery, specifically). The data tag always points to a SVG image.

In Firefox, when the data tag is changed, the new SVG loads and all the proper events fire. In Chrome, this doesn't occur until I click on the SVG canvas -- once that happens, the new SVG displays and its associated events all fire.

Why is this? How can I force Chrome to refresh the <object> when I change its data attribute?


Not an answer but too long for a comment.

My goal is to process odds and evens sequentially.

In that case, you can not have more than one thread for odds and one for evens. Any reasons why you need a sequential run? Do you use the result of process(2) to run process(4)?

What I'm worried about is the fact that numbers may be distributed unevenly and I will end up with some threads to have less work to do.

Possibly, but how could you distribute more work to the idle thread without breaking the sequential constraint?

4

3 に答える 3

11

ええと、今夜は本当に退屈で、学業以外のことをしたかったので、多くの仕様とフォーラムを掘り下げました.

HTML4 仕様には SVG についての言及がないようで、行き止まりになっています。HTML5 Spec Working Draftは、dataプラグインを呼び出してコンテンツをロードするために使用できることを示しています。HTML5 Spec Editor's Draft ではSVGについて言及 ており、 SVG は埋め込みコンテンツのカテゴリに分類されることを示しています。

Editor's DraftはWorking Draft<object>で定義されているように要素に追加の詳細を追加するため、要素をロードする動作は受け入れられた標準ではないと言えます。<object>(間違っていたら誰か訂正してください。)

とにかく、<object>仕様では、ブラウザーが MIME タイプなどによってオブジェクトを解釈する方法に関するすべての通常の技術用語は別として... この質問に関連する部分を見つけます。

4.6: ロードが失敗した場合(HTTP 404 エラーが発生した場合、DNS エラーが発生した場合など)、要素でerrorという名前の単純なイベントを起動し、一連のステップ全体の最後のステップにジャンプします (フォールバック)。

...

10.: リソースが完全に読み込まれたら、要素でloadという名前の単純なイベントを発生させるタスクをキューに入れます。

(単純なイベントは単に、イベントがバブリングしないことを意味し (そのため、親要素でそれをリッスンすることはできません)、キャンセルできず、Eventインターフェイスを使用します)

したがって、これを見て<object>、DOM から要素を選択した場合はonloadandonerrorイベントが必要であると考えましたobject.addEventListenerSVGおよびの Mozilla Developer Network ドキュメントを見ると<object>、JavaScript ドキュメントの多くが不完全です。残念。

JSFiddle と Chrome Dev Tools と Firefox Web Console をいじってみたところ、どちらもonloadとをサポートしていることがわかりましたonerror

試験結果

Google Chrome (18.0.1025.165) および Firefox (12.0)

サポート:

  • addEventListener('load', function(){})
  • obj.onload = function(){};

サポートしていません (イベントが発生しないようです) :

  • addEventListener('error', function(){})
  • obj.onerror = function(){}

fiddleからわかるように、Chrome でloadイベントを使用すると無限ループが発生します。これを行うことは想定されていません(編集者のドラフトによると):

上記のアルゴリズムは、CSS プロパティ ('display'、'overflow'、'visibility' を含む) とは無関係です。たとえば、要素が「display:none」CSS スタイルで非表示になっている場合でも実行され、要素の可視性が変更されても再度実行されません。

誰かがすでにバグを報告しているようです。そのバグを確認していただけると、Chrome デベロッパー チームの助けになります。

TL;DR

オブジェクトをロードする動作はまだ標準として認められていませんが、Chromium プロジェクトでバグを確認できます。@Hello71 が提案したように、要素を DOM から削除して再度追加することもできますが、動作させることができませんでした

于 2012-04-29T22:03:47.437 に答える
6

実際、私はまったく同じ問題を抱えていました。http://jsfiddle.net/unesJ/を見てください。次のコードで解決しました。

html:

<object id="graph" data="image1.svg" type="image/svg+xml"></object>

ジャバスクリプト:

var new_url = 'image2.svg';
$('#graph').attr('data', new_url);
$('#graph').load(new_url);

それは私のために働く

  • クロム 24.0.1312.52 m
  • Firefox 17.0.1
于 2013-01-21T23:25:00.490 に答える
2

私はかなり多くのことを試みました。残念ながら、私は次のことを行うことに頼らざるを得ませんでした。

setTimeout(function(){
  $('body').trigger('click');
}, 40);

いいえ、私にはこれ以上の解決策はありませんが、それで仕事は終わります。

于 2012-08-08T22:58:33.287 に答える