忍者ブログ
Simon's CyberSpace El Dorado.のBLOG
カレンダー
11 2025/12 01
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
プロフィール
HN:
Simon
性別:
非公開
QRコード
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

<div class="sortID">
 <div>こんにちは!</div>
 <div>ここをドラッグ<br><script type="text/javascript" src="??????"></script></div>
</div>

<script type="text/javascript">
$("div.sortID").sortable();
</script>

scriptはたとえば忍者Toolsのカウンターやメールフォーム、XREAの広告タグなどを配置。(内部でdocument.writeされている)
これがあるとIEで対象をドラッグした瞬間にかなりの確立でエラーが発生し落ちる。落ちないにしてもページが変わってdocument.writeの内容だけが表示される。

という現象がありました。誰かわかる方はいますでしょうか。是非ともコメントください。また、sortableをdraggableに変えるとドラッグ自体は問題なくできる。sortableの仕様をもう一度見直そう。(´・ω・`)

[追記]
ドラッグしても問題ない状態にすることができた。

その前にSortableの動作を記述。
はじめに言っておくと、Sortable自体のソースをじっくり見たわけではないので鵜呑みにしないでほしい。
Firebugを使用して確認した限りではDraggableとは動作が違う。
まず、Draggableはスタイルシートの内容を見てもらうとわかるがドラッグ中 top left の座標がリアルタイムに変更され
このことによって表示位置が変わっている。
Sortableの場合、まず対象の要素をvisibilty:hiddenにし不可視の状態にする。(※デフォルトの場合)
次に対象の要素と同じものが新たに加わりドラッグ中はそれを動かすことになる。つまり同じものが2つできるわけである。
別のSortable対象要素と場所交換される場合は、不可視状態のものと位置を交換することになり、ドラッグ中の要素はあくまで
場所交換の判定に使われる。ドラッグを終了させるとドラッグ中のものは消える。
このことから要素内に<script>タグがある場合はそれも実行されるわけだが、バナーなどのiframeがdocument.writeされる場合で
iframeの中身が変わるなら、ドラッグ前とドラッグ中で別のバナーを見ることになる場合もある。
また、要素内に同じものがあるとまずい場合などは対処しなければならない。

さて、今回問題となったIEとSafariだが、document.writeをするとその内容のみ画面に表示される(IEの場合は高確率で落ちる)ため、
document.writeされようとしている内容を一時的に別のところに確保して、その後対象に書き込むことにした。

var str = '';
document.org_write = document.write;
document.write = function( s ) { str += s }

のようなことをするとdocument.writeで書き込もうとしてる<script src="???">系の広告やツールでも中身を取得できる。
なお確保後は document.write = document.org_write で元に戻しておこう。また、複数ある場合はstrではなく配列などに確保するのも良い。
この方法は「document.write 遅延」等で検索するといろいろ出てくる。
広告など表示に時間がかかるものを後で表示させる手段として紹介されている。
確保した内容はjQueryなら $("#id").html(str) というふうに書いておけば対象の場所に書き込める。

上記の方法で行ったところ、SortableでドラッグしてもIEやSafariでおかしくなる事が無くなった。
めでたしめでたし?
PR
この記事にコメントする
NAME:
TITLE:
MAIL:
URL:
COMMENT:
PASS: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
TRACKBACK URL :
Copyright © Simon's BLOG。。All Rights Reserved.
Powered by NinjaBlog / Template by Ninja☆BT
忍者ブログ [PR]