|
日時: 2010/01/31 22:35
名前: lightbox
|
Greasemonkey に手書きブログのプラグインを移植してみようと思って、
ブックマークレットで処理しているやり方をまず試してみると、アウトでした。
そこで、いろいろ試したのですが、予想通りというかセキュリティ上の
エラーが出つづけて IFRAME は作成されるのですが、書き込めません。
つまり、document.write が失敗します。
そこまでで相当時間をかけていたので、一度あきらめかけたのですが
配布元のドキュメントを順に目を通していくと、それらしい解決策が
みつかりました。
HTML injection tips
要するに、IFRAME のロードが終わってから書き込めということで、
実際はサンプルのように about:blank の必要はありませんし、
innerHTML である必要も無いので、document.write 使ったほうが
面倒が無いと思います。
ここで、setTimeout を使っているのは、アプリで jQuery を使っていて、
最初この方法でうまくいったのでずっとそのままにしています。jQuery の
イベント処理でもうまくいくかもしれませんが、jQuery そのものがちょっと
自分としては使いづらいので、できるだけ別の方法をとっています。
( パレット作成の為だけに使った経緯があります )
メンテナンス性や他への移植可搬性重視です
ですから、ptototype.js も殆ど使いません。
ちなみに、@require を使って、Greasemonky の中で jQuery を使う方法
が紹介されているのを見つけましたが、場合によっては単純では無いので方法のうちの一つです。
document.write される文字列は、さらに読み込む外部 JavaScript や
画面や起動部分を含んでいます。これで正しく動作しています。
それから、後からテストして解ったのですが、このように分けなくても、
を document.write しても動作しました。結局書き込むタイミングだけの問題で
配布サイトの方法を踏襲すればよいはずです。但し、Wubdows2000 では動いたのですが、
XP では、IFRAME 内に Flash を読み込んで、JavaScript にアクセスさせると
エラーになってしまい、まだ原因は不明です。
▼ document.write される str の中身(こちらで変換しています)
拡張子:
var str="";
str+="<META http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> \n";
str+="<script charset=\"utf-8\" type=\"text/javascript\" src=\"http://winofsql.jp/jquery.js\"></script> \n";
str+="<script charset=\"utf-8\" type=\"text/javascript\" src=\"http://winofsql.jp/farbtastic.js\"></script> \n";
str+="<script charset=\"utf-8\" type=\"text/javascript\" src=\"http://winofsql.jp/tegaki_firefox.js\"></script> \n";
str+="<script language=\"javascript\" type=\"text/javascript\" charset=\"utf-8\"> \n";
str+="function test() { \n";
str+=" $('#picker').farbtastic(function() { \n";
str+=" $('#color').val( \n";
str+=" $.farbtastic('#picker').color \n";
str+=" ); \n";
str+=" $('#color2').css('background-color',$.farbtastic('#picker').color); \n";
str+=" }); \n";
str+=" $.farbtastic('#picker').setColor('#123456'); \n";
str+="var p = getCookie(\"pal_text1\"); \n";
str+="if ( p != null ) { \n";
str+=" loadData(); \n";
str+="} \n";
str+="else { \n";
str+=" loadDefault(); \n";
str+="} \n";
str+=" \n";
str+="} \n";
str+="</script> ";
str+="<LINK rel=\"stylesheet\" type=\"text/css\" href=\"http://winofsql.jp/pagehack2.css\" /> \n";
str+="<link rel=\"stylesheet\" href=\"http://winofsql.jp/farbtastic.css\" type=\"text/css\" /> \n";
str+="<STYLE type=\"text/css\"> \n";
str+=".sc { \n";
str+=" overflow:hidden; \n";
str+=" border-style:solid; \n";
str+=" border-width:1px; \n";
str+=" border-color:#c0c0c0; \n";
str+=" cursor:pointer; \n";
str+="} \n";
str+="#ca1,#ca2,#ca3,#ca4,#ca5,#ca6,#ca7,#ca8,#ca9,#ca10,#ca11,#ca12,#ca13,#ca14,#ca15,#ca16 { \n";
str+=" padding:1px; \n";
str+="} \n";
str+="</STYLE> \n";
str+="<H1 class='subt'>パレットプラグイン V3−GM</H1> \n";
str+="<form action=\"\"> \n";
str+="<table style='margin-left:20px'><tr><td> \n";
str+="<input \n";
str+=" type=\"text\" \n";
str+=" id=\"color\" \n";
str+=" name=\"color\" \n";
str+=" value=\"#123456\" readonly \n";
str+="/><br> \n";
str+="<input \n";
str+=" type=\"text\" \n";
str+=" id=\"color2\" \n";
str+=" name=\"color2\" \n";
str+=" readonly \n";
str+=" style='height:40px;' \n";
str+="/> \n";
str+="</td><td valign=\"bottom\"> \n";
str+="<input \n";
str+=" type=\"button\" \n";
str+=" value=\"決定\" \n";
str+=" onClick='setColor()' \n";
str+="/> \n";
str+="</td></tr></table> \n";
str+="<br> \n";
str+="<div id=\"picker\" style='margin-left:20px;margin-top:0px;'></div> \n";
str+="</form> ";
str+="<div style='margin-left:16px;margin-bottom:10px;'>\n";
str+="<table id=pallist><tr>\n";
str+="<td>\n";
str+="<SELECT id=target size=17 onChange=\"displayColor(this)\" style='width:170px;'>\n";
str+="</SELECT>\n";
str+="</td>\n";
str+="<td>\n";
str+="<input \n";
str+=" type=\"button\" \n";
str+=" value=\"転送\" \n";
str+=" onClick='setPalette()' \n";
str+="/><br><br> \n";
str+="<div id=ca1><div onClick='setCurrent(this)' class=sc id=pc1 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca2><div onClick='setCurrent(this)' class=sc id=pc2 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca3><div onClick='setCurrent(this)' class=sc id=pc3 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca4><div onClick='setCurrent(this)' class=sc id=pc4 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca5><div onClick='setCurrent(this)' class=sc id=pc5 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca6><div onClick='setCurrent(this)' class=sc id=pc6 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca7><div onClick='setCurrent(this)' class=sc id=pc7 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca8><div onClick='setCurrent(this)' class=sc id=pc8 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca9><div onClick='setCurrent(this)' class=sc id=pc9 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca10><div onClick='setCurrent(this)' class=sc id=pc10 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca11><div onClick='setCurrent(this)' class=sc id=pc11 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca12><div onClick='setCurrent(this)' class=sc id=pc12 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca13><div onClick='setCurrent(this)' class=sc id=pc13 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca14><div onClick='setCurrent(this)' class=sc id=pc14 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca15><div onClick='setCurrent(this)' class=sc id=pc15 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="<div id=ca16><div onClick='setCurrent(this)' class=sc id=pc16 style='width:28px;height:12px;background-color:#FFFFFF'></div></div> \n";
str+="</td>\n";
str+="</tr></table>\n";
str+="</div>\n";
str+="<!--input \n";
str+=" type=\"button\" \n";
str+=" value=\"移動\" \n";
str+=" onClick='changePosition(780,580)' \n";
str+=" style='margin-left:20px;' \n";
str+="/--> \n";
str+="<input \n";
str+=" type=\"button\" \n";
str+=" value=\"保存\" \n";
str+=" onClick='saveData()' \n";
str+=" style='margin-left:20px;' \n";
str+="/> \n";
str+="<input \n";
str+=" type=\"button\" \n";
str+=" value=\"クリア\" \n";
str+=" onClick='clearData()' \n";
str+="/> \n";
str+="<input \n";
str+=" type=\"button\" \n";
str+=" value=\"登録\" \n";
str+=" onClick='setThisColor()' \n";
str+="/> \n";
str+=" <span style='font-size:12px;'>直</span> <input \n";
str+=" id='direct' type=\"checkbox\" \n";
str+="/> \n";
str+="<br> \n";
▼ tegaki_firefox.js
拡張子:
var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
var curColorNo;
var curColorString = "";
function setThisColor() {
var col1 = $.farbtastic('#picker').color;
col1 = col1.replace(/#/, '');
var col2 = parseInt( col1, 16 );
if ( !confirm("新しい色\n"+col1+"\nを\n"+curColorNo+" 番目の色として設定してよろしいですか?") ) {
return;
}
var obj = document.getElementById("target");
var ar = (obj.value).split(",");
var clist = "";
for( i = 0; i < 16; i++ ) {
if ( i != 0 ) {
clist += ",";
}
if ( (i+1) == curColorNo ) {
document.getElementById("pc"+(i+1)).style.backgroundColor = ( "#" + col1 );
clist += col1;
}
else {
clist += ar[i];
}
}
var targetNodeList = obj.getElementsByTagName("OPTION")
targetNodeList[obj.selectedIndex].value = clist;
if ( confirm("クッキーに保存しますか?") ) {
saveData()
}
}
function setCurrent(obj) {
var i,ar,nColor;
for( i = 1; i <= 16; i++ ) {
document.getElementById("ca"+i).style.backgroundColor = "#C5D1A5";
}
var str;
str = obj.id;
str = str.replace("pc","");
curColorNo = parseInt(str);
document.getElementById("ca"+str).style.backgroundColor = "#3399ff";
if ( document.getElementById("direct").checked ) {
ar = (document.getElementById("target").value).split(",");
nColor = parseInt( ar[curColorNo-1], 16 );
parent.FlashObj("OEditBlog11").SetColor(nColor, 0);
}
}
function displayColor(obj) {
if ( obj.value == "0" || obj.value == '' ) {
return;
}
var ar = (obj.value).split(",");
for( i = 0; i < 16; i++ ) {
document.getElementById("pc"+(i+1)).style.backgroundColor = ( "#" + ar[i] );
}
}
function setPalette() {
if ( document.getElementById("target").value == "0" ) {
alert("対象を選択して下さい ");
return;
}
var ar = (document.getElementById("target").value).split(",");
var loc = parent.location + "";
var oElement = parent.document.getElementById("ColorButton").getElementsByTagName("td");
var nCnt;
for(nCnt = 0; nCnt < (oElement.length/3); nCnt++) {
if (userAgent.indexOf("msie") == -1) {
if ( loc.indexOf("VEditBlogS") != -1 ) {
oElement.item(nCnt*3).setAttribute("onclick","return true;" );
str = "<div onclick='SelectColor2Fuchidori(\"OEditBlog11\", this.parentNode, "
col2 = parseInt( ar[nCnt], 16 );
str = str + col2 + "," + ((col2 * -1)-1)
str = str + ")'><div class=\"Color\" style=\"background-color:#"
str = str + ar[nCnt] + ";\"></div></div>"
oElement.item(nCnt*3).innerHTML = str;
if ( oElement.item(nCnt*3).style.backgroundColor == 'rgb(51, 153, 255)' ) {
parent.SelectColor2Fuchidori("OEditBlog11",oElement.item(nCnt*3),col2,((col2 * -1)-1) );
}
}
else {
oElement.item(nCnt*3).setAttribute("onclick","return true;" );
str = "<div onclick='SelectColor2(\"OEditBlog10_4\", this.parentNode, "
col2 = parseInt( ar[nCnt], 16 );
str = str + col2
str = str + ")'><div class=\"Color\" style=\"background-color:#"
str = str + ar[nCnt] + ";\"></div></div>"
oElement.item(nCnt*3).innerHTML = str;
if ( oElement.item(nCnt*3).style.backgroundColor == 'rgb(51, 153, 255)' ) {
parent.SelectColor2("OEditBlog10_4",oElement.item(nCnt*3),col2 );
}
}
}
else {
if ( loc.indexOf("VEditBlogS") != -1 ) {
oElement.item(nCnt*3).onclick='';
str = "<div onclick='SelectColor2Fuchidori(\"OEditBlog11\", this.parentElement, "
col2 = parseInt( ar[nCnt], 16 );
str = str + col2 + "," + ((col2 * -1)-1)
str = str + ")'><div class=\"Color\" style=\"background-color:#"
str = str + ar[nCnt] + ";\"></div></div>"
oElement.item(nCnt*3).innerHTML = str;
if ( oElement.item(nCnt*3).style.backgroundColor == '#3399ff' ) {
parent.SelectColor2Fuchidori("OEditBlog11",oElement.item(nCnt*3),col2,((col2 * -1)-1) );
}
}
else {
oElement.item(nCnt*3).onclick='';
str = "<div onclick='SelectColor2(\"OEditBlog10_4\", this.parentElement, "
col2 = parseInt( ar[nCnt], 16 );
str = str + col2
str = str + ")'><div class=\"Color\" style=\"background-color:#"
str = str + ar[nCnt] + ";\"></div></div>"
oElement.item(nCnt*3).innerHTML = str;
if ( oElement.item(nCnt*3).style.backgroundColor == '#3399ff' ) {
parent.SelectColor2("OEditBlog10_4",oElement.item(nCnt*3),col2 );
}
}
}
}
}
function setColor() {
var col1 = $.farbtastic('#picker').color;
col1 = col1.replace(/#/, '');
var col2 = parseInt( col1, 16 );
var loc = parent.location + "";
var oElement = parent.document.getElementById("ColorButton").getElementsByTagName("td");
var nCnt;
for(nCnt = 0; nCnt < oElement.length; nCnt++) {
if (userAgent.indexOf("msie") == -1) {
if ( oElement.item(nCnt).style.backgroundColor == 'rgb(51, 153, 255)' ) {
if ( loc.indexOf("VEditBlogS") != -1 ) {
oElement.item(nCnt).setAttribute("onclick","return true;" );
str = "<div onclick='SelectColor2Fuchidori(\"OEditBlog11\", this.parentNode, "
str = str + col2 + "," + ((col2 * -1)-1)
str = str + ")'><div class=\"Color\" style=\"background-color:"
str = str + $.farbtastic('#picker').color + ";\"></div></div>"
oElement.item(nCnt).innerHTML = str;
parent.SelectColor2Fuchidori("OEditBlog11",oElement.item(nCnt),col2,((col2 * -1)-1) );
}
else {
oElement.item(nCnt).setAttribute("onclick","return true;" );
str = "<div onclick='SelectColor2(\"OEditBlog10_4\", this.parentNode, "
str = str + col2
str = str + ")'><div class=\"Color\" style=\"background-color:"
str = str + $.farbtastic('#picker').color + ";\"></div></div>"
oElement.item(nCnt).innerHTML = str;
parent.SelectColor2("OEditBlog10_4",oElement.item(nCnt),col2 );
}
break;
}
}
else {
if ( oElement.item(nCnt).style.backgroundColor == '#3399ff' ) {
if ( loc.indexOf("VEditBlogS") != -1 ) {
oElement.item(nCnt).onclick='';
str = "<div onclick='SelectColor2Fuchidori(\"OEditBlog11\", this.parentElement, "
str = str + col2 + "," + ((col2 * -1)-1)
str = str + ")'><div class=\"Color\" style=\"background-color:"
str = str + $.farbtastic('#picker').color + ";\"></div></div>"
oElement.item(nCnt).innerHTML = str;
parent.SelectColor2Fuchidori("OEditBlog11",oElement.item(nCnt),col2,((col2 * -1)-1));
}
else {
oElement.item(nCnt).onclick='';
str = "<div onclick='SelectColor2(\"OEditBlog10_4\", this.parentElement, "
str = str + col2
str = str + ")'><div class=\"Color\" style=\"background-color:"
str = str + $.farbtastic('#picker').color + ";\"></div></div>"
oElement.item(nCnt).innerHTML = str;
parent.SelectColor2("OEditBlog10_4",oElement.item(nCnt),col2 );
}
break;
}
}
}
}
function changePosition(x,y) {
parent.document.getElementById("ti").style.left=(x+'px');
parent.document.getElementById("ti").style.top=(y+'px');
setCookie("p_position_x",(x+'px'),31536000);
setCookie("p_position_y",(y+'px'),31536000);
}
function setCookie(name, value, seconds) {
if (typeof(seconds) != 'undefined') {
var date = new Date();
date.setTime(date.getTime() + (seconds*1000));
var expires = "; expires=" + date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
name = name + "=";
var carray = document.cookie.split(';');
for(var i=0;i < carray.length;i++) {
var c = carray[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return null;
}
function deleteCookie(name) {
setCookie(name, "", -1);
}
var x = getCookie("p_position_x");
var y = getCookie("p_position_y");
if ( x != null ) {
// parent.document.getElementById("ti").style.left=x;
// parent.document.getElementById("ti").style.top=y;
// parent.document.getElementById("ti").style.top = '580px';
}
function saveData() {
var target,i,obj;
if (userAgent.indexOf("msie") == -1) {
target = document.getElementById("target");
for( i = 0; i < 16; i++ ) {
obj = target.getElementsByTagName("OPTION")[i];
setCookie("pal_text"+(i+1),encodeURIComponent(obj.text),31536000);
setCookie("pal_value"+(i+1),obj.value,31536000);
}
}
else {
target = document.getElementById("target");
if ( target.options.length != 0 ) {
for( i = 0; i < 17; i++ ) {
setCookie("pal_text"+(i+1),target.options[i].text,31536000);
setCookie("pal_value"+(i+1),target.options[i].value,31536000);
}
}
}
}
function loadData() {
var target,i,work;
if (userAgent.indexOf("msie") == -1) {
target = document.getElementById("target");
for( i = 0; i < 16; i++ ) {
work = document.createElement("OPTION")
if ( i == 0 ) {
work.selected = true;
}
target.appendChild( work )
work.appendChild( document.createTextNode(decodeURIComponent(getCookie("pal_text"+(i+1)))) );
work.value = getCookie("pal_value"+(i+1));
}
}
else {
target = document.getElementById("target");
for( i = 0; i < 17; i++ ) {
work = document.createElement("OPTION")
if ( i == 1 ) {
work.selected = true;
}
target.options.add( work )
target.options[i].text = getCookie("pal_text"+(i+1));
target.options[i].value = getCookie("pal_value"+(i+1));
}
}
displayColor(document.getElementById("target"));
setCurrent(document.getElementById("pc16"));
}
function loadDefault() {
var target,i,work;
if (userAgent.indexOf("msie") == -1) {
target = document.getElementById("target");
for( i = 0; i < 16; i++ ) {
work = document.createElement("OPTION")
if ( i == 0 ) {
work.selected = true;
}
target.appendChild( work )
work.appendChild( document.createTextNode("Palette"+(i+1)) );
work.value = "ffffff,000000,0000ff,00ff00,00ffff,ff0000,ff00ff,ffff00,c0c0c0,808080,800000,800080,808000,000080,008080,ffa500";
}
}
else {
target = document.getElementById("target");
work = document.createElement("OPTION")
target.options.add( work )
target.options[0].text = "対象を選択して下さい";
target.options[0].value = "";
for( i = 1; i < 17; i++ ) {
work = document.createElement("OPTION")
if ( i == 1 ) {
work.selected = true;
}
target.options.add( work )
target.options[i].text = "Palette"+i;
target.options[i].value = "ffffff,000000,0000ff,00ff00,00ffff,ff0000,ff00ff,ffff00,c0c0c0,808080,800000,800080,808000,000080,008080,ffa500";
}
}
displayColor(document.getElementById("target"));
setCurrent(document.getElementById("pc16"));
}
function clearData() {
var target,i,work;
if (userAgent.indexOf("msie") == -1) {
target = document.getElementById("target");
for( i = 15; i >=0; i-- ) {
obj = target.getElementsByTagName("OPTION")[i];
target.removeChild( obj );
}
}
else {
target = document.getElementById("target");
work = target.options.length;
if ( work != 0 ) {
for( i = work; i >= 0; i-- ) {
target.options.remove(i);
}
}
}
}
function pal_img(id) {
if ( id == 'swf_export' ) {
return( "http://lightbox.on.coocan.jp/export.png" );
}
if ( id == 'swf_import' ) {
return( "http://lightbox.on.coocan.jp/import.png" );
}
return "";
}
function pal_type(id) {
if ( id == 'swf_export' ) {
return( "save" );
}
if ( id == 'swf_import' ) {
return( "load" );
}
return "";
}
function pal_charset(id) {
if (userAgent.indexOf("msie") == -1) {
return( "shift_jis" );
}
else {
return( "shift_jis" );
}
}
function pal_load(id,pdata) {
var target,i,work;
var saveString = "";
var ar;
if (userAgent.indexOf("msie") == -1) {
target = document.getElementById("target");
ar = pdata.split("\n");
work = target.getElementsByTagName("OPTION")
for( i = 0; i < 16; i++ ) {
work[i].text = ar[i*2];
work[i].value = ar[i*2+1];
}
}
else {
target = document.getElementById("target");
ar = pdata.split("\n");
work = target.getElementsByTagName("OPTION")
for( i = 1; i < 17; i++ ) {
work[i].text = ar[(i-1)*2];
work[i].value = ar[(i-1)*2+1];
}
}
displayColor(document.getElementById("target"));
setCurrent(document.getElementById("pc16"));
}
function pal_save(id,shiftFlg,ctrlFlg) {
var i;
var saveString = "";
if (userAgent.indexOf("msie") == -1) {
for( i = 0; i < 16; i++ ) {
if ( i != 0 ) {
saveString += "\n";
}
saveString += decodeURIComponent(getCookie("pal_text"+(i+1)));
saveString += "\n";
saveString += decodeURIComponent(getCookie("pal_value"+(i+1)));
}
}
else {
for( i = 1; i < 17; i++ ) {
if ( i != 1 ) {
saveString += "\n";
}
saveString += getCookie("pal_text"+(i+1));
saveString += "\n";
saveString += getCookie("pal_value"+(i+1));
}
}
return( saveString );
}
function pal_end(id) {
}
後でブツクマークレットと同時メンテナンスするので、
必要無い部分もそのままです。
|