jQueryでオブジェクトのスクリプト属性が書き換えられなくなっていた件について
2012年5月16日
このブログでは、ほぼ1年ぶりの記事になる。
以前、このブログでカラム幅をはみ出す画像の表示に関して、Jeansで表示されるHTML中で次のように処理していた。
これを書いた当初はちゃんと動いていたのだが、その後、ブラウザのアップデートなどしているうちに、動かなくなったらしい。「$(this).attr("onclick"」のところが動作していない。web検索してみると、以下のような記事を見つけた。
・Webkitではイベント系の属性をJavaScriptから書き換えられない(の?)
・Javascript::JQueryで動的にOnClick属性を設定しようとしてハマった。
おそらく、セキュリティーの問題で仕様変更になったのだろう。で、上にあげた2番目のリンクに従って、次のように書き換えた。
これで、とりあえず今はちゃんと動いている。それにしても、JavaScriptのクロージャ、便利だ。
久々にJeans CMSのスキンの編集を行った。以前の編集がまずく、書き換えてはいけないファイルを書き換えてあったりして、それに気がついて修正するのに手間取ったが、その間違いがなかったらすんなり編集できたはずだ。自分で言うのもなんだが、結構便利に使えている。バグが幾つかあるので、修正しないとなという気持ちになってきた。
以前、このブログでカラム幅をはみ出す画像の表示に関して、Jeansで表示されるHTML中で次のように処理していた。
<script type="text/javascript"> function imgpopup(obj,width,height){ var href=obj.src+""; href=href.substring(href.indexOf("/media/",0)+1,href.length); href="?imagepopup=skin&image_path="+href+"&alt_text="+obj.alt; window.open(href,'imagepopup','status=no,toolbar=no,scrollbars=no,resizable=yes,width='+width+',height='+height); } $("#mainwrapper img").each(function(){ if (510<$(this).attr("width")) { $(this).css("cursor","pointer"); $(this).attr("onclick","imgpopup(this,"+parseInt($(this).attr("width"))+","+parseInt($(this).attr("height"))+");"); $(this).attr("height",Math.floor($(this).attr("height")*510/$(this).attr("width"))); $(this).attr("width",510); } }); </script>
これを書いた当初はちゃんと動いていたのだが、その後、ブラウザのアップデートなどしているうちに、動かなくなったらしい。「$(this).attr("onclick"」のところが動作していない。web検索してみると、以下のような記事を見つけた。
・Webkitではイベント系の属性をJavaScriptから書き換えられない(の?)
・Javascript::JQueryで動的にOnClick属性を設定しようとしてハマった。
おそらく、セキュリティーの問題で仕様変更になったのだろう。で、上にあげた2番目のリンクに従って、次のように書き換えた。
<script type="text/javascript"> function imgpopup(src,alt,width,height){ var href=src+""; href=href.substring(href.indexOf("/media/",0)+1,href.length); href="?imagepopup=skin&image_path="+href+"&alt_text="+alt; window.open(href,'imagepopup','status=no,toolbar=no,scrollbars=no,resizable=yes,width='+width+',height='+height); } $("#mainwrapper img").each(function(){ var src=$(this).attr("src"); var alt=$(this).attr("alt"); var width=$(this).attr("width"); var height=$(this).attr("height"); if (510<width) { $(this).css("cursor","pointer"); $(this).click(function(){ imgpopup(src,alt,width,height) }); $(this).attr("height",Math.floor(height)*510/width); $(this).attr("width",510); } }); </script>
これで、とりあえず今はちゃんと動いている。それにしても、JavaScriptのクロージャ、便利だ。
久々にJeans CMSのスキンの編集を行った。以前の編集がまずく、書き換えてはいけないファイルを書き換えてあったりして、それに気がついて修正するのに手間取ったが、その間違いがなかったらすんなり編集できたはずだ。自分で言うのもなんだが、結構便利に使えている。バグが幾つかあるので、修正しないとなという気持ちになってきた。