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

为什么android元素浏览器的link元素的onload属性不可靠？

1 个答案: