ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#3459 closed defect (fixed)

IE6で絵文字パレットが真っ白になる

Reported by: sato@… Owned by: ebihara
Priority: minor Milestone: OpenPNE2.12.8
Component: 指定しない Version: 2.12.x & 2.14.x
Keywords: OpenPNE2.13.6 Cc:

Description (last modified by kudo)

■現象

OpenPNE2.12.4からOpenPNE2.12.5にVupすると絵文字パレットの動作がIE6でおかしくなるようです。

  • プレビューモード
  • 一度絵になった絵文字は正しく表示されます
  • OpenPNE2.12.5以降のサイトは全て同じ現象が出ます
  • キャッシュを削除してこのサイトを見るとこのサイトでも再現します

■原因

webapp/modules/pc/templates/inc_tinymce_textarea.tplの、以下の差分で発生しています

68行目
-<a id="mce_textmode_button_({$key})" href="#" onclick="pne_mce_insert_tagname('mce_editor_textarea', '({$key|replace:"_":":"})');"><img src="({t_img_url_skin filename=deco_`$key`})" alt="" /></a> 
++<a id="mce_textmode_button_({$key})" href="javascript:;" onclick="pne_mce_insert_tagname('mce_editor_textarea', '({$key|replace:"_":":"})');"><img src="({t_img_url_skin filename=deco_`$key`})" alt="" /></a> 

 (以下、同様の修正略)

リンクオンクリックでページ遷移をさせないための設定ですが
href="#"と違い、href="javascript:;" ではロード後に追加した画像は、キャッシュ以外から読み込まない状態になっていると思われます
修正案は、絵文字画像のプレロードが良いと思います(href="#"は、あまり良くないとされていますので)

createEmojiPalletDoCoMo()を改修して、絵文字領域作成時点で出力しておくのが良いと思います。(表示上は隠したままなので、I/Fは変わりません)

■修正内容

■関連情報

  • パッチを添付します

Change History (11)

comment:1 Changed 11 years ago by sato@…

パッチです

Index: /public_html/js/pc_emoji_palet/pc_emoji_palet.js
===================================================================
--- /public_html/js/pc_emoji_palet/pc_emoji_palet.js
+++ /public_html/js/pc_emoji_palet/pc_emoji_palet.js
@@ -1,9 +1,9 @@
 
 useAu=false;useSb=false;selfPallet=true;palletWidth=300;palletHeight=160;PalletURL='./js/pc_emoji_palet/pc_emoji_palet.html';var palletList={docomo:{id:"epDocomo",emoji:[{start:1,end:252}],shortname:"i"},au:{id:"epAu",emoji:[{start:1,end:518},{start:700,end:822}],shortname:"e"},softbank:{id:"epSb",emoji:[{start:1,end:485}],shortname:"s"}};function createEmojiPalletDoCoMo()
-{document.write('<div id="epDocomo" style="display:none;"></div>');}
+{document.write('<div id="epDocomo" style="display:none;"></div>');renderEmojiPallet('docomo');}
 function createEmojiPalletAu()
-{document.write('<div id="epAu" style="display:none"></div>');}
+{document.write('<div id="epAu" style="display:none"></div>');renderEmojiPallet('au');}
 function createEmojiPalletSoftBank()
-{document.write('<div id="epSb" style="display:none"></div>');}
+{document.write('<div id="epSb" style="display:none"></div>');renderEmojiPallet('softbank');}
 function renderEmojiPallet(carrier)
 {var doc=document;var pl=palletList[carrier];var emoji_set=pl.emoji;var div=doc.getElementById(pl.id);Element.addClassName(pl.id,"isLoadEmojiImage");for(var num in emoji_set){var emoji=emoji_set[num];var emoji_end=emoji.end;for(var i=emoji.start;i<=emoji_end;i++){var src="./skin/default/img/emoji/"+pl.shortname+"/"+pl.shortname+i+".gif";var alt="["+pl.shortname+":"+i+"]";var img=doc.createElement("img");img.setAttribute("src",src);img.setAttribute("alt",alt);img.onclick=function(){var emoji_code=this.getAttribute("alt");putEmojiToSelf(emoji_code);};div.appendChild(img);}}
@@ -15,10 +15,5 @@
 function putEmojiToSelf(emoji){var body=document.getElementsByName("body");for(var i=0;i<body.length;i++){if(body[i].nodeName.toLowerCase()=='textarea'){var elm=body[i];break;}}
 pne_insert_str_to_selection(elm,emoji);}
-function togglePallet(pallet){if($(pallet).style.display=="none"){if(!Element.hasClassName(pallet,'isLoadEmojiImage')){Element.addClassName(pallet,"processLoadEmojiImage");var carrier='';if(pallet=='epDocomo'){carrier='docomo';}
-if(pallet=='epAu'){carrier='au';}
-if(pallet=='epSb'){carrier='softbank';}
-renderEmojiPallet(carrier);}
-if(Element.hasClassName(pallet,'processLoadEmojiImage')){return togglePallet(pallet);}
-closeAllEmojiPallet();Element.show(pallet);}else{Element.hide(pallet);}}
+function togglePallet(pallet){if($(pallet).style.display=="none"){closeAllEmojiPallet();Element.show(pallet);}else{Element.hide(pallet);}}
 function closeAllEmojiPallet()
 {if(document.getElementById("epDocomo")){Element.hide(document.getElementById("epDocomo"));}
Index: /public_html/js/pc_emoji_palet/pc_emoji_palet.js.src
===================================================================
--- /public_html/js/pc_emoji_palet/pc_emoji_palet.js.src
+++ /public_html/js/pc_emoji_palet/pc_emoji_palet.js.src
@@ -50,4 +50,5 @@
 {
     document.write('<div id="epDocomo" style="display:none;"></div>');
+    renderEmojiPallet('docomo');
 }
 
@@ -55,4 +56,5 @@
 {
     document.write('<div id="epAu" style="display:none"></div>');
+    renderEmojiPallet('au');
 }
 
@@ -60,4 +62,5 @@
 {
     document.write('<div id="epSb" style="display:none"></div>');
+    renderEmojiPallet('softbank');
 }
 
@@ -160,21 +163,4 @@
 function togglePallet(pallet) {
     if ($(pallet).style.display == "none") {
-        if (!Element.hasClassName(pallet, 'isLoadEmojiImage')) {
-            Element.addClassName(pallet, "processLoadEmojiImage");
-            var carrier = '';
-            if (pallet == 'epDocomo') {
-                carrier = 'docomo';
-            }
-            if (pallet == 'epAu') {
-                carrier = 'au';
-            }
-            if (pallet == 'epSb') {
-                carrier = 'softbank';
-            }
-            renderEmojiPallet(carrier);
-        }
-        if (Element.hasClassName(pallet, 'processLoadEmojiImage')) {
-            return togglePallet(pallet);
-        }
         closeAllEmojiPallet();
         Element.show(pallet);

comment:2 Changed 11 years ago by sato@…

Description: modified (diff)

comment:3 Changed 11 years ago by ebihara

Keywords: OpenPNE2.13.6 added
Milestone: OpenPNE2.12.8
Version: 2.12.x & 2.13.x

パッチを提供していただいてありがとうございます。取り込みを検討します。

comment:4 Changed 11 years ago by ebihara

Owner: changed from nobody to ebihara
Status: newassigned

#3081 と重複ですがこちらを優先します。

comment:5 Changed 11 years ago by ebihara

Keywords: 確認中 added

以下のリビジョンで修正しました。

修正にあたっては、再現方法は参考にしましたが、いただいたパッチの適用はおこなわず、独自に修正しました。これは、いただいたパッチには「絵文字のプレロードによって、絵文字挿入をおこなわないメンバーに対しても絵文字のローディングをおこなってしまうため、ストレスを与えてしまう」というデメリットがあるためです。

いろいろ試したところ、どうもデフォルトで onClick イベントに登録されている処理が走ってしまうのが原因であることがわかりました。そのため、 onClick イベントの処理を属性値に指定したものだけに限定するため、 return false; を記述する方向で対応しました。

また、これによって href="#" としてもトップに遷移しなくなったため、元に戻しました。 javascript:; のままでも問題はありませんが、当初このスクリプトは window オブジェクトではなく document オブジェクトの元で動作することを想定していたはずでしたので、こちらのほうが望ましいと判断しました。

comment:6 Changed 11 years ago by ebihara

Keywords: 差し戻し added; 確認中 removed

JavaScript? の DOM 操作で生成されるものについての対策を忘れていた気がします。

comment:7 Changed 11 years ago by ebihara

Keywords: 確認中 added; 差し戻し removed

修正の必要があるのはカラーピッカーだけでした。

comment:8 Changed 11 years ago by ogawa

Summary: 【バグ】IE6で絵文字パレットが真っ白になるIE6で絵文字パレットが真っ白になる

comment:9 Changed 11 years ago by ShogoKawahara

Keywords: テスト待ち added; 確認中 removed

comment:10 Changed 11 years ago by kiwa

Keywords: テスト待ち removed
Resolution: fixed
Status: assignedclosed

再現環境が手元にないので再現環境でのテストは行えませんでしたが、正常動作の確認をしたところ、問題ありませんでした。

確認ブラウザ

  • Windiws XP SP3
    • IE6
    • IE7
    • Firefox3
    • Safari3.2
    • Opera9.63

comment:11 Changed 10 years ago by kudo

Description: modified (diff)
Note: See TracTickets for help on using tickets.