Adobe EdgeがJQuery使ったコードの邪魔をする

久しぶりに技術系エントリー。つっても大した内容ではない。

うちのクライアントの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;
}

こんな感じかね。

この程度で済むならいいんだけど、もっと複雑なやつになると大変だよなぁ。
みんなどう対処してるんだろう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

認証のために問題を解いて下さい * Time limit is exhausted. Please reload CAPTCHA.