实施例

Question

如何判断页面的CSS是否已成功加载并在Watin 2.1中应用其样式？

Answer 1

在做了一些研究并写了我的答案之后，我偶然发现了this link，它解释了你需要了解的关于CSS的所有信息，加载时以及如何检查它。

所提供的链接解释得非常好，事实上，我正在添加一些引用以供将来参考 _{如果你很好奇，我的答案将是＃2和＃4的变体。}

When is a stylesheet really loaded?

...

有了这个，让我们看看我们在这里有什么。

// my callback function 
// which relies on CSS being loaded function
CSSDone() {
    alert('zOMG, CSS is done');
};

// load me some stylesheet 
var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css",
    head = document.getElementsByTagName('head')[0],
    link = document.createElement('link');

link.type = "text/css"; 
link.rel = "stylesheet";
link.href = url;

// MAGIC 
// call CSSDone() when CSS arrives
head.appendChild(link);

魔法部分的选项，从简单到荒谬的排序

收听link.onload
收听link.addEventListener（'load'）
收听link.onreadystatechange
setTimeout并检查document.styleSheets
setTimeout并检查您创建的特定元素样式的更改但使用新CSS的样式

第五个选项太疯狂了，并且假设您可以控制CSS的内容，所以请忘记它。此外，它会在超时时检查当前样式，这意味着它将刷新回流队列并且可能会很慢。 CSS到达的速度越慢，回流越多。所以，真的，忘了它。

那么实施魔法呢？

// MAGIC 

// #1   
link.onload = function () {
    CSSDone('onload listener');
};   

// #2   
if (link.addEventListener) {
    link.addEventListener('load', function() {
        CSSDone("DOM's load event");
    }, false);   
};   

// #3   
link.onreadystatechange = function() {
    var state = link.readyState;
    if (state === 'loaded' || state === 'complete') {
        link.onreadystatechange = null;
        CSSDone("onreadystatechange");
    }   
};

// #4   
var cssnum = document.styleSheets.length;
var ti = setInterval(function() {
    if (document.styleSheets.length > cssnum) {
        // needs more work when you load a bunch of CSS files quickly
        // e.g. loop from cssnum to the new length, looking
        // for the document.styleSheets[n].href === url
        // ...

        // FF changes the length prematurely :(
        CSSDone('listening to styleSheets.length change');
        clearInterval(ti);
    }   
}, 10);

// MAGIC ends

Answer 2

@ShadowScripter排列的文章有更新。这种新方法据称适用于所有浏览器， 包括FF。

var style = document.createElement('style');
style.textContent = '@import "' + url + '"';

var fi = setInterval(function() {
  try {
    style.sheet.cssRules; // <--- MAGIC: only populated when file is loaded
    CSSDone('listening to @import-ed cssRules');
    clearInterval(fi);
  } catch (e){}
}, 10);  

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

Answer 3

页面加载后，您可以验证某些元素的样式，如下所示：

var style = browser.Div(Find.ByClass("class")).Style;
Assert.That(Style.Display, Is.StringContaining("none"));
Assert.That(Style.FontSize, Is.EqualTo("10px"));

等......

Answer 4

由于浏览器兼容性可能会有所不同，并且新的未来浏览器标准可能会发生变化，我建议将onload侦听器和CSS添加到样式表中，这样您就可以监听HTML元素z-index何时发生变化使用单一样式表。否则，请使用下面的函数，为每种样式添加新的元标记。

将以下内容添加到要加载的CSS文件中：

columnDefs

将以下内容添加到您的脚本中：

#*(insert a unique id for he current link tag)* {
    z-index: 0
}

实施例

function whencsslinkloads(csslink, whenload ){ var intervalID = setInterval( function(){ if (getComputedStyle(csslink).zIndex !== '0') return; clearInterval(intervalID); csslink.onload = null; whenload(); }, 125 // check for if it has loaded 8 times a second ); csslink.onload = function(){ clearInterval(intervalID); csslink.onload = null; whenload(); } }：

index.html

<!doctype html> <html> <head> <link rel=stylesheet id="EpicStyleID" href="the_style.css" /> <script async href="script.js"></script> </head> <body> CSS Loaded: <span id=result>no</span> </body> </html>：

script.js

the_style.css

请不要让您的脚本同步加载（没有#EpicStyleID { z-index: 0 }属性），这样您就可以捕获链接的onload事件。有更好的方法，比如上面的方法。

如何确定CSS是否已加载？

4 个答案:

When is a stylesheet really loaded?

实施例