久しぶりに技術系エントリー。つっても大した内容ではない。
うちのクライアントの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;
} こんな感じかね。
この程度で済むならいいんだけど、もっと複雑なやつになると大変だよなぁ。
みんなどう対処してるんだろう。