为什么在安卓原生浏览器中，链接元素的onload属性不可靠？

Question

       var style1 = document.createElement("link");
       style1.id = "rel";
       style1.rel = "stylesheet";
       style1.href = "http://www.mysite.com/css.css";
       style1.onload = function(){document.body.innerHTML+="fffffff";};
       document.getElementsByTagName("head")[0].appendChild(style1);

这段代码在Chrome/Firefox中可以工作，但是我的Froyo（2.3）和Jellybean（4.1）Android设备上的原生浏览器却无法输出任何内容。问题出在哪里？我希望能够在链接的onload事件中执行一些JS。其他任何方法都不能满足我的需求。 :/

问题不在于innerHTML。如果您想尝试，可以使用alert进行检查（自担风险）。

另一个答案提到了通过以下方式检查此功能：

var huh = 'onload' in document.createElement('link');

但是在原生浏览器中都存在这个问题！这是怎么回事？

- Alkanshel

---

使用真实事件监听，而不是那个DOM0垃圾，怎么样？ - Matt Ball

在将链接添加到DOM后，此方法在移动设备上无法正常工作（没有错误，样式表从未加载）：document.getElementById("my_rel").addEventListener('load',prepClasses,false); - Alkanshel

Answer 1

安卓浏览器不支持对<script>元素使用"onload" / "onreadystatechange"事件：http://pieisgood.org/test/script-link-events/
但它会返回：

"onload" in link === true

因此，我的解决方案是从userAgent中检测Android浏览器，然后等待您样式表中的一些特殊CSS规则（例如，“body”边距的重置）。
如果不是Android浏览器并且支持“onload”事件 - 我们将使用它：

var userAgent = navigator.userAgent,
    iChromeBrowser = /CriOS|Chrome/.test(userAgent),
    isAndroidBrowser = /Mozilla\/5.0/.test(userAgent) && /Android/.test(userAgent) && /AppleWebKit/.test(userAgent) && !iChromeBrowser; 

addCssLink('PATH/NAME.css', function(){
    console.log('css is loaded');
});

function addCssLink(href, onload) {
    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", href);
    document.head.appendChild(css);
    if (onload) {
        if (isAndroidBrowser || !("onload" in css)) {
            waitForCss({
                success: onload
            });
        } else {
            css.onload = onload;
        }
    }
}

// We will check for css reset for "body" element- if success-> than css is loaded
function waitForCss(params) {
    var maxWaitTime = 1000,
        stepTime = 50,
        alreadyWaitedTime = 0;

    function nextStep() {
        var startTime = +new Date(),
            endTime;

        setTimeout(function () {
            endTime = +new Date();
            alreadyWaitedTime += (endTime - startTime);
            if (alreadyWaitedTime >= maxWaitTime) {
                params.fail && params.fail();
            } else {
                // check for style- if no- revoke timer
                if (window.getComputedStyle(document.body).marginTop === '0px') {
                    params.success();
                } else {
                    nextStep();
                }
            }
        }, stepTime);
    }

    nextStep();
}

Demo: http://codepen.io/malyw/pen/AuCtH

- Serg Hospodarets