久しぶりに技術系エントリー。つっても大した内容ではない。
うちのクライアントのWEBサイトのFlashコンテンツを徐々にHTML5化して行ってるのですが、オーサリングソフトはAdobe Edge Animate(CC 2014)使ってます。
で、このEdgeアニメはライブラリとしてJQuery使ってるんですが、Edgeアニメとは関係ない部分でJQueryを同ページ内で使うと変にEdgeアニメが変に干渉して上手く動かない場合があります。
たまに動いたり動かなかったり。
たぶん$().readyだか$().loadだかでEdgeアニメのデータ読み込むのに時間が掛かってて、それでなにかしら問題発生してるとか・・・よく分からんけど。
色々調べたけど理想的な解決方法は結局見つからなくて、
・Edgeアニメ使うの止める
・EdgeアニメじゃないほうのコードでjQuery使うの止める
の2択しかないかなぁと。
例えばIE9以下でplaceholderと同様のことがやりたい場合ah-placeholder.jsとか使いたくなるんだけど、これはjQueryプラグインなのでEdgeアニメと同時使用すると上手く動かないことがある。
placeholder程度だったらjQuery使わなくても自力でゴリゴリ書いても大した苦労は無い。
//ページロード時実行 window.onload = function() { placeholderIE('対象のid'); } //古いIEでplaceholderを使用する function placeholderIE(id) { //IE9以下の場合はplaceholderの値をvalueに変換 if(getIEVer() <= 9) { var txt = document.getElementById(id); var searchText = txt.getAttribute("placeholder"); txt.value = searchText; txt.style.color="#999"; txt.onfocus = function(){ if(txt.value == searchText) { txt.value=""; txt.style.coloe="#000"; } } txt.onblur = function() { if(txt.value == "") { txt.value=searchText; txt.style.coloe="#999"; } } } }; //IE使用バージョン取得 function getIEVer() { var ver = navigator.appVersion.toLowerCase(); //IE11からmsieじゃなくなるけど、今回のケースではコレでOK var startPos = ver.indexOf("msie"); if(startPos != -1) { var endPos = ver.indexOf(";", startPos); var v = ver.substring(startPos + 5, endPos); return v; } return 999; }
こんな感じかね。
この程度で済むならいいんだけど、もっと複雑なやつになると大変だよなぁ。
みんなどう対処してるんだろう。