2013-12-19 20 views
0

所以我正在做一个iframe发布消息到父页面。 iframe的内容发送宽度和高度的POST消息,并在收到消息后抓住这些元素以更改元素的样式。然而,每当我这样做,twitter引导正在改变元素的风格(我只能假定它是一个时间问题)。CSS Twitter引导覆盖JavaScript样式,因为它在脚本之后执行。如何最后执行脚本?

我试着包装消息监听器的功能,但代码从未执行。这就是:

 window.addEventListener("message", function(event) { 
      window.onload = function() { 
       console.log("loaded"); 
       var array = event.data.split(" "); 
       addStyle(document.getElementById("outer-frame-form"), 
        ['height', 'width', 'position', 'overflow'], 
        [array[0],array[1],'relative','hidden'], 
        true); 
      } 
     }); 

     function addStyle(element, properties, values, important) { 
      // this will be run when the whole pa 
       var i; 
       var cssString = ""; 
       for (var i=0; i<properties.length; i++) 
       { 
        //remove previously defined property 
        if (element.style.setProperty) 
         element.style.setProperty(properties[i], ''); 
        else 
         element.style.setAttribute(properties[i], ''); 

        cssString += properties[i] + ':' + values[i] + ((important) ? ' !important' : '') + '; ' 
        console.log(properties[i]); 
       } 

       //insert the new style with all the old rules 
       element.setAttribute('style', element.style.cssText + " " + cssString); 
     } 

我可以使用哪些其他的方式来等待,所有的CSS加载后执行脚本,因此Twitter的引导将无法覆盖它?谢谢!

回答

0

我认为你可能会过度复杂化。在某个地方的模板中,您将有一个标题标签 - 这是引导程序加载的位置。把你的CSS meta tag放在这个之下 - 它的“级联样式表”让最后的优先级为

+0

它是,高度和宽度仍然被覆盖。 –