4

「リンク」タグ (外部スタイルシート) を介して CSS スタイルシートをターゲット DOM に挿入するブックマークレットがあります。

最近、これは Amazon.com で Internet Explorer のみで機能しなくなりました。他のサイトや他のブラウザー (Amazon.com でも) で動作します。スタイルシートを挿入するために使用している手法は非常に簡単です。

document.getElementsByTagName('head')[0].appendChild(s);

ここで、「s」は で作成されたリンク オブジェクトですdocument.createElement。Amazon でも、Internet Explorer Developer Toolbar DOM インスペクタを介して要素がそこにあることがわかります。 ただしdocument.styleSheets、JavaScript でコレクションにアラートを出すと、そこにはありません。

テストとして、URL をスタイルシートに引数として渡すIE 専用のdocument.createStyleSheetメソッドを使用しようとしました。これはエラーをスローします：

この操作を完了するのに十分なストレージがありません

興味がある点：

  • のドキュメントにdocument.createStyleSheetは、ページに 31 を超えるスタイルシートがある場合にエラーがスローされると記載されていますが、(1) 別のエラーであり、(2) ページに 10 個の外部スタイルシートしかありません。
  • エラーをグーグルで調べたところ、多くの行き止まりが見つかりました。スタイルシート関連を示唆していたのはこの drupal 投稿だけでしたが、外部スタイルに関連する問題ではなく、インライン スタイルの文字数制限について言及しています。
  • 同じコードは、createStyleSheet呼び出しも含めて、IE の他のサイトでも機能します。

これは私にとって「完全な謎」の状態に達しました。

4

4 に答える 4

4

私はちょうどこれを試しました

javascript:(function(d) { d.createStyleSheet().cssText="* {color:blue !important;}"   })(document);

と

javascript:(function(d) { d.createStyleSheet("http://myschemas.com/pub/clear.css") })(document);

amazon.com の IE から、両方とも機能しました。CSS のいくつかの項目に !important を追加して、それらがすぐに有効になるようにする必要があるかもしれません。

更新: 考えられる解決策が見つかりました...

javascript:(function(c) {c[c.length-1].addImport("http://myschemas.com/pub/clear.css")})(document.styleSheets);

お役に立てば幸いです。

于 2009-03-25T17:49:38.070 に答える
2

答えを探していると、CSS をプログラムでロードするときに 31 個のスタイルシートの制限によってこの例外が発生することがわかりました。

http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/not-enough-storage-is-available-to-complete-this-operation.aspx

元の制限は、ナレッジ ベースのドキュメントに記載されています (IE8 以下でのみ発生すると想定されていますが、IE9 で発生していると繰り返し報告されています)。

http://support.microsoft.com/kb/262161

于 2012-11-26T16:57:45.357 に答える
0

これが私が行うすべてであり、機能しないのを見たことはありません。

loadCss = function( name, url ) {

    var head = document.getElementsByTagName('head')[0];

    var link = document.createElement("link");

    link.setAttribute("type", "text/css");

    link.setAttribute("rel", "stylesheet");

    link.setAttribute("href", url);

    link.setAttribute("media", "screen");

    head.appendChild(link);
};
于 2009-03-25T19:35:22.170 に答える
0

jQueryを使用して同様のことを行っていたところ、次の順序で行う必要があることがわかりました。

var $link = $('<link>');
$('head').add($link);
$link.attr({
  type: 'text/css',
  // ... etc ...
  media: 'screen'
});

そうしないと、IE では動作しません (IE7、IE8 はまだ見ていません)。

HTH

于 2010-11-29T03:42:38.573 に答える