IE6投掷"访问被拒绝"连接到styleSheet.cssText时

时间:2012-09-25 15:42:53

标签: javascript css cross-browser internet-explorer-6

有一个动态创建的<style>标记,我正在连接另一块css。这是动态加载模块的更大框架的一部分。

最初它创建了新的样式标签但是由于着名的“31样式表限制”这不再是一个选项,所以我决定回收现有的样式标签(除非它们包含太多规则或新字符串包含@import,在这种情况下,无论如何都必须创建一个新的。

无论如何,我让它在所有主流浏览器(FF2 +,Chrome14 +,Opera10 +,IE7 +,Safari 4.0+)中运行,现在IE6让我头疼。

我对其他场景中的这个错误很熟悉,但我从未在此上下文中看到过。此外,不要打扰任何IE6-timeywimey,我很清楚它。但不幸的是,这仍然需要IE6支持。

Screenshot of the bug and part of the source code

请注意,括号计数仅用于估算和调试目的。 try / catch最初不在cssText +=附近,我添加了它,因为我发现它在IE6中抛出异常。

1 个答案:

答案 0 :(得分:2)

我找到了自己问题的答案。事实证明IE6有一个模糊的安全措施,不允许操纵由其他脚本间接创建的元素(即使它们来自完全相同的源/域)。

在这种情况下,simplified method工作正常,但actual code失败了。唯一的区别是实际代码使用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 );
                /* ... */

这解决了这个问题。