javascript - styleSheet.cssText に連結するときに IE6 が「アクセスが拒否されました」をスローする

Question

動的に作成された<style>タグがあり、追加の css をそれに連結しています。これは、モジュールを動的にロードするためのより大きなフレームワークの一部です。

最初は新しいスタイル タグを作成しましたが、有名な「31 スタイルシート制限」により、これはもはやオプションではないため、既存のスタイル タグをリサイクルすることにしました (ルールが多すぎる場合や、新しい文字列に @import が含まれている場合を除きます)。いずれにせよ、新しいものを作成する必要があります)。

とにかく、すべての主要なブラウザー (FF2+、Chrome14+、Opera10+、IE7+、Safari 4.0+) で動作するようになりましたが、IE6 が頭を悩ませています。

私は他のシナリオでこのエラーに精通していますが、このコンテキストで見たことはありません。また、IE6-timeywimey を気にしないでください。私はそれをよく知っています。しかし残念ながら、これは IE6 のサポートがまだ必要な例外的なケースです。

ブラケット数は、見積もりとデバッグのみを目的としていることに注意してください。try/catch はcssText +=もともとありませんでしたが、IE6 で例外がスローされることがわかったので追加しました。

Answer 1

私は自分の質問に対する答えを見つけました。IE6 には、他のスクリプトによって間接的に作成された要素の操作を禁止するあいまいなセキュリティ対策があることがわかりました (それらがまったく同じオリジン/ドメインからのものであっても)。

この場合、単純化された方法は正常に機能していましたが、実際のコードは失敗していました。唯一の違いは、実際のコードが jQuery を使用してデータを保存し、要素を作成し、要素を挿入していたことです。その最後のアクション (要素の挿入) が問題でした。

私が変更され

        /**
         * @param {jQuery|HTMLElement} $nextnode
         */
        function addStyleTag( text, $nextnode ) {
            var s = document.createElement( 'style' );
            // IE: Insert into document before setting cssText
            if ( $nextnode ) {
                // If a raw element, create a jQuery object, otherwise use directly
                if ( $nextnode.nodeType ) {
                    $nextnode = $( $nextnode );
                }
                $nextnode.before( s );
                /* ... */

に：

        /**
         * @param {jQuery|HTMLElement} nextnode
         */
        function addStyleTag( text, nextnode ) {
            var s = document.createElement( 'style' );
            // IE: Insert into document before setting cssText
            if ( nextnode ) {
                // If a jQuery object, get raw element, otherwise use directly
                if ( nextnode.jquery ) {
                    nextnode = nextnode.get( 0 );
                }
                nextnode.parentNode.insertBefore( s, nextnode );
                /* ... */

そして、それは問題を解決しました。