为什么android元素浏览器的link元素的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设备上的库存浏览器不会打印任何内容.有什么问题？我想如果我可以执行一些链接的js onload.在我的情况下,任何其他东西都会成为一个黑客.:/

问题不在于innerHTML.如果您愿意,可以使用警报进行尝试(由您自担风险).

另一个答案提到通过执行检查此功能

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

..但在两个股票浏览器中都是如此!wtf家伙？

Answer 1

Android 浏览器不支持元素的“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();
}

演示： http: //codepen.io/malyw/pen/AuCtH