0

我正在尝试编写将导致 UIWebView 在加载时应用特定于设备的样式表的 HTML。

在我的 HTML 模板的元素中，我定义了以下 Javascript：

    <script type="text/javascript">
        window.onload = function()
        {
            var newStylesheetLink = document.createElement('link');
            newStylesheetLink.rel = 'stylesheet';
            newStylesheetLink.type = 'text/css';

            if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i))
            {
                newStylesheetLink.href='about~iphone.css');
            }
            else
            {
                newStylesheetLink.href='about~ipad.css');
            }

            document.head.appendChild(newStylesheetLink);
        };
    </script>

我已经验证了 UIWebView 加载时确实调用了这个函数，并且设备检测工作正常；但是 newStylesheetLink 元素 var 引用的样式表并未应用于 UIWebView 的内容（即，显然，它要么不加载引用的 CSS 文件，要么如果加载，将其作为子元素附加到 head 元素上不会导致 UIWebView 的内容更新）。

有任何想法吗？

谢谢！

卡尔

4

1 回答 1

0

好吧，经过多次试验和错误，我发现如果不是将链接的href设置为：

newStylesheetLink.href=<value>;

我改为将其设置为：

newStylesheetLink.setAttribute('href', <value>);

一切正常。换句话说，如果我使用 setAttribute 方法而不是 .href 表示法，它就可以工作。为什么会这样是我无法理解的，特别是因为 .rel 和 .type 分配工作得很好。（会不会是 iOS 中的 setAttribute 方法解析了应用程序包中样式表的路径，而 .href 分配却没有？）

所以，这个修改后的脚本实际上是有效的：

<script type="text/javascript">
    window.onload = function()
    {
        var newStylesheetLink = document.createElement('link');

        newStylesheetLink.rel = 'stylesheet';
        newStylesheetLink.type = 'text/css';

        if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i))
        {
            newStylesheetLink.setAttribute('href', 'about~iphone.css');
        }
        else
        {
            newStylesheetLink.setAttribute('href', 'about~ipad.css');
        }

        document.head.appendChild(newStylesheetLink);
    };
</script>
于 2013-09-13T07:56:37.490 回答