个人中心
gpt4 book ai didi

javascript - 无法在谷歌浏览器中访问外部 CSS 样式

转载 作者：数据小太阳 更新时间：2023-10-29 05:22:54 27 4
gpt4 key购买 nike

所以我有以下代码

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        document.styleSheets[0].cssRules[0].style.color="blue";
    </script>
</head>
//etc.

基本上这段代码可以在 IE 和 Mozilla 中运行，但不能在 Chrome 中运行。实际上，当您运行 document.styleSheets[0].cssRules 时，它返回一个 CSSRulesList 对象(在 IE 和 Mozilla 中)，但在 Chrome 中它返回 null。顺便说一句，对于嵌入式样式，这个对象似乎甚至在 Chrome 中也能工作。

那么这个功能实际上在 Chrome 中不可用吗？如果是这样，是否有 Chrome 替代方案可以让您使用 Javascript 处理外部样式表/文件？

最佳答案

另一种选择

document.styleSheets[0].rules[0].style.color = "blue";

此代码段可能有助于查看支持的集合。建议先使用cssRules集合，如果不支持再使用rules集合。

if (document.styleSheets[0].cssRules)
    document.styleSheets[0].cssRules[0].style.color = "blue";
else if (document.styleSheets[0].rules)
    document.styleSheets[0].rules[0].style.color = "blue";

编辑

下面的代码片段在 IE8、IE11、Firefox、Chrome、Safari 和 Opera 上按预期工作；在我的本地和生产服务器上；它也适用于 jsbin ;但它不适用于 js fiddle - 在上述任何浏览器上!

<!DOCTYPE>
<html>
<head>
<style type="text/css">
    .panel { 
        background-color: #00ff00; 
        color: #ffffff; 
        width: 100px; 
        height: 100px; 
        font-size: 30px;
    }
</style>
<script type="text/javascript">
window.onload = function(){
    document.getElementById('button').onclick = function() {
        if (document.styleSheets[0].cssRules)
            document.styleSheets[0].cssRules[0].style.color = "black"; 
        else if (document.styleSheets[0].rules)
            document.styleSheets[0].rules[0].style.color = "black";
    };
};
</script>
</head>
<body>
    <div class="panel"><b>Text</b></div>
    <input type="button" name="button" id="button" value="Change Color" />
</body>
</html>

如果我将 style 部分更改为此

<link rel="stylesheet" type="text/css" href="http://external-server/styles.css" />

上面的代码片段仅适用于 IE11。所以，这似乎是一个跨域策略问题，因为 Firefox 说 同源策略不允许读取位于 http://external-server/styles.css 的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。

也许下面的代码片段可以解决这个问题

<style type="text/css">
    @import url("http://external-domain/styles.css");
</style>

好吧，@import 提示 失败了!但是让我们检查从外部服务器接收到的 header 

Remote Address: x.x.x.x:x
Request URL: http://www.external-domain.com/styles.css
Request Method: GET
Status Code: 200 OK
+[Request Headers] 10
-[Response Headers] 11
  Accept-Ranges: bytes
  Connection: Keep-Alive
  Content-Encoding: gzip
  Content-Length: 105
  Content-Type: text/css
  ...

如我们所见，我们拥有样式，但无法访问或更改它们。 Chrome 和 Opera 在说

`Uncaught TypeError: Cannot set property 'color' of undefined`;

Firefox 的说法相同，但更详细

`TypeError: document.styleSheets[0].cssRules[0].style is undefined`

最后，连 IE11 也有同样的看法:) 

`SCRIPT5007: Unable to set property 'color' of undefined or null reference. 
File: css.html, Line: 30, Column: 4`

好吧，此时还有一件事需要考虑 - CORS要求？! IE 8+、Firefox 3.5+、Chrome 3+、Opera 12+、Safari 4+ 支持 CORS ...

使用 CORS 访问托管在外部域上的 CSS

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
// Access CSS hosted on external domain using CORS
// http://stackoverflow.com/users/1310701/hex494d49
//
window.onload = function(){
    var xhr = CORSRequest("GET", "http://external-domain/styles.css");
    if (!xhr){ // if CORS isn't supported
        alert("Still using Lynx?");
        return;
    }
    xhr.onload = function() {
        var response = xhr.responseText;
        appendCSS(response);
    }
    xhr.onerror = function() {
        alert('Something went wrong!');
    };
    xhr.send();

    document.getElementById('button').onclick = function() {
        if (document.styleSheets[0].cssRules)
            document.styleSheets[0].cssRules[0].style.color = "black"; 
        else if (document.styleSheets[0].rules)
            document.styleSheets[0].rules[0].style.color = "black";
    };
};

var appendCSS = function(css){
    var s = document.createElement('STYLE');
    s.setAttribute('type', 'text/css');
    if(s.styleSheet)  // IE
        s.styleSheet.cssText = css;
    else  // the rest of the world
        s.appendChild(document.createTextNode(css));
    document.getElementsByTagName('HEAD')[0].appendChild(s);
};

var CORSRequest = function(method, url){
    var xhr = new XMLHttpRequest();
    if("withCredentials" in xhr){  // Chrome, Firefox, Opera, Safari
        xhr.open(method, url, true);
    }else if(typeof XDomainRequest != "undefined"){  // IE
        xhr = new XDomainRequest();
        xhr.open(method, url);
    }else{ // CORS isn't supported
        xhr = null;
    }
    return xhr;
};

</script>
</head>
<body>
    <div class="panel"><b>Text</b></div>
    <input type="button" name="button" id="button" value="Change Color" />
</body>
</html>

就是这样，它有效!刚刚在 IE8、IE11、Firefox、Chrome、Opera 和 Safari 上测试过。但是......只有在网络服务器上启用了 Access-Control-Allow-Origin ，否则你会得到这样的错误

XMLHttpRequest 无法加载 http://external-domain/styles.css。请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问 Origin 'null'。

在我的服务器上它没有启用所以我必须自己做。如果有人在共享主机上，这可能是个问题。

题外话: 如何在 Apache 上启用 Access-Control-Allow-Origin

首先，启用Apache Headers模块

ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/headers.load

重启 Apache 

/etc/init.d/apache2 restart

在 Apache 配置文件的 Directory 部分添加这些行

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

或将它们添加到 .htaccess 文件中。最后两个可以省略。如果您只想限制某人访问，请将上一行的“*”替换为“www.my-kitchen.com”。再次重启网络服务器，仅此而已。

关于javascript - 无法在谷歌浏览器中访问外部 CSS 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24472352/

27 4 0
文章推荐： javascript - meteor .js : lib folder not loaded first
文章推荐： ios - Swift 4.2 无法将类型 '(UIImagePickerController.InfoKey).Type' 的值转换为预期的参数类型 'UIImagePickerController.InfoKey'
文章推荐： ios - 生产应用程序中的 Swift 断言行为
文章推荐： javascript - 使用 javascript 在 Web 浏览器中解压 csv 文件
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com