Javascript Bookmarklet 在 IE8 中失败

Question

有人想知道为什么这个小书签在 IE8 中失败吗？它将 Friefox 和 Safari 中的所有文本转为大写。但在 IE8 中，它只是因“正在加载...”而停止。我在 IE8 中启用了运行 scriplet 并降低了 javascript 安全设置。

更新 2010 年 3 月 19 日： 此书签现在可以在 IE 中运行，感谢 sergey。

javascript:
(function(){
  var i,t,D=document,h,f,g=D.getElementsByTagName,ce=D.createElement,c=D.createStyleSheet,ac='appendChild',cn='childNodes',l,s='*{text-transform:uppercase}input,textarea{text-transform:none}';
  for(i=0;t=document.getElementsByTagName('textarea')[i];i++)
    t.value=t.value.toUpperCase();
  if(D.namespaces){
    h=g('head')[0];
    f=h[ac](ce('div'));
    f.innerHTML='b<style type=\'text/css\'>'+s+'</style>';
    h[ac](f[cn][1]);
    f.parentNode.removeChild(f);
  }
  else
    if(c){
      c('javascript:\''+s+'\'')
    }
  else{
    l=document.createElement('link');
    l.rel='stylesheet';
    l.href='data:text/css,'+escape(s);
    D.documentElement[cn][0][ac](l)
  }
}
)()

Answer 1

对代码进行少量添加即可达到目的：

javascript:(function(){
   var i,t,D=document;
  for(i=0;t=D.getElementsByTagName('textarea')[i];++i)
    t.value=t.value.toUpperCase();
   var newSS,styles='*{text-transform:uppercase}input,textarea{text-transform:none}';
  if (document.namespaces) {
    var head = document.getElementsByTagName("head")[0];
    var factory = head.appendChild(document.createElement("div"));
    factory.innerHTML = ' <style type=\'text/css\'>' + styles + '</style>';
    head.appendChild(factory.childNodes[1]);
    factory.parentNode.removeChild(factory);
  }
  else
  if(D.createStyleSheet){
    D.createStyleSheet("javascript:'"+styles+"'");
  }
  else{
    newSS=D.createElement('link');
    newSS.rel='stylesheet';
    newSS.href='data:text/css,'+escape(styles);
    D.documentElement.childNodes[0].appendChild(newSS);
  }
}
)()

更新 17/03/10：我缩小了代码，创建了一个书签并在 IE 中成功使用了它。

2010 年 3 月 18 日更新：我注意到缩小后的代码无法在 IE 浏览器以外的其他浏览器中运行，这是经过测试的版本：

javascript:(function(){var i,t,D=document,h,f,g=D.getElementsByTagName,ce=D.createElement,c=D.createStyleSheet,ac='appendChild',cn='childNodes',l,s='*{text-transform:uppercase}input,textarea{text-transform:none}';for(i=0;t=document.getElementsByTagName('textarea')[i];i++)t.value=t.value.toUpperCase();if(D.namespaces){h=g('head')[0];f=h[ac](ce('div'));f.innerHTML='b<style type=\'text/css\'>'+s+'</style>';h[ac](f[cn][1]);f.parentNode.removeChild(f);}else if(c){c('javascript:\''+s+'\'')}else{l=document.createElement('link');l.rel='stylesheet';l.href='data:text/css,'+escape(s);D.documentElement[cn][0][ac](l)}})()

Answer 2

作为参考，这是“未缩小”的代码：

javascript:(function () {
var i, t, D = document;
for (i = 0; t = D.getElementsByTagName('textarea')[i]; ++i) {
    t.value = t.value.toUpperCase();
    var newSS, styles = '* { text-transform: uppercase; } input, textarea { text-transform: none}';
    if (D.createStyleSheet) {
        D.createStyleSheet("javascript:'" + styles + "'");
    } else {
        newSS = D.createElement('link');
        newSS.rel = 'stylesheet';
        newSS.href = 'data:text/css,' + escape(styles);
        D.documentElement.childNodes[0].appendChild(newSS);
    }
}
})()

我的 Mac 上没有方便的 IE 8，但尝试撒入 alert('here at line XXX'); 以便穷人进行调试。

也许 IE 8 不喜欢样式表的 javascript: 源？

此外，循环会添加与文本区域一样多的样式表。那太愚蠢了。将其移出循环，如下所示：

javascript:(function () {
var i, t, D = document;
for (i = 0; t = D.getElementsByTagName('textarea')[i]; ++i) {
    t.value = t.value.toUpperCase();
}
var styles = '* { text-transform: uppercase; } input, textarea { text-transform: none}';
if (D.createStyleSheet) {
    D.createStyleSheet("javascript:'" + styles + "'");
} else {
    var newSS = D.createElement('link');
    newSS.rel = 'stylesheet';
    newSS.href = 'data:text/css,' + escape(styles);
    D.documentElement.childNodes[0].appendChild(newSS);
}
})()

请注意，该代码中仍然存在一些有问题的内容。我不太确定该循环的条件。我要做的就是将其从循环中取出，如下所示：

javascript:(function () {
var D = document;
var i, t = D.getElementsByTagName('textarea');
for (i = 0; i < t.length; i++) {
    t[i].value = t[i].value.toUpperCase();
}
/* Rest of the code here. */
})()

作为读者/询问者的练习：这仅是大写文本区域，而不是文本输入。

编辑：
缩小它以保持在最大长度以下：

javascript:(function () {
var D = document;
var i, t = D.getElementsByTagName('textarea');
for (i = 0; i < t.length; i++) {
    t[i].value = t[i].value.toUpperCase();
}
D.createStyleSheet('javascript:"* { text-transform: uppercase; } input, textarea { text-transform: none}"');
})()

结果：

javascript:(function(){var D = document;var i,t=D.getElementsByTagName('textarea');for(i=0;i<t.length;i++)t[i].value=t[i].value.toUpperCase();D.createStyleSheet('javascript:"*{text-transform:uppercase;}input,textarea{text-transform:none}"');})()

这只有 IE 特定的代码。