Hi, does anyone know how I could search for the protocol used in CSS?
I did try use "document.querySelectorAll" but failed to get it working.
So basically I am trying to find out via Javascript if CSS is calling the http protocol for example:
<style>
body {
background-image: url("http://mysite.com/images/logo.jpg");
}
</style>
You can do it by seaching rules inside the css sheets.
I took some time to play with this:
<html>
<style type="text/css">
body {
background: "#F00";
background-image: url(http:\\teste.png);
color: #FFF;
font-weight: bold;
}
</style>
<body>
<script type="text/javascript">
var seachHttp = function () {
var cssSheets = document.styleSheets, // Loaded CSS Sheets
i =0, il = cssSheets.length, // Counter and limit for sheets
j, jl, rules, rule, // Counter and vars for Rules inside a Sheet
stylesToSearch = [ // Properties to Seach HTTP ON
'background',
'background-image',
],
k, kl=stylesToSearch.length, // Counter for properties
s, // Current Property
v // Current Value;
for(;i<il;i++) { // Loop Sheets
rules = cssSheets[i].rules || cssSheets[i].cssRules;
for(j=0,jl=rules.length;j<jl;j++) { // Loop Rules
rule = rules[j];
for(k=0;k<kl;k++){ // Loop Styles
s = stylesToSearch[k];
v = rule.style[s]; // Get Value from Current Style
if ( v !== undefined && v.toString().toLowerCase().indexOf("http") > -1 ) { // Seach for HTTP Content
alert("Found HTTP at " + rule.selectorText + " " + s + " = " + rule.style[s]);
}
}
}
}
}
seachHttp();
</script>
</body>
</html>
Notes: IE alerts two times(one for background and another for background-image); FF and GC alert only for background-image;
Thanks for this appreciate it. Just out of curiosity, is there not some way of doing this via "querySelectorAll"?
Just a note, this is also popular:
background-image: url("//mysite.com/images/logo.jpg");
because it works on both http and https without getting insecure content messages. You may want to check for those too.
Thanks pritaeas
I am trying to add the code to my application.
var seachHttp = function () {
var cssSheets = document.styleSheets, // Loaded CSS Sheets
i =0, il = cssSheets.length, // Counter and limit for sheets
j, jl, rules, rule, // Counter and vars for Rules inside a Sheet
stylesToSearch = [ // Properties to Seach HTTP ON
'background',
'background-image',
],
k, kl=stylesToSearch.length, // Counter for properties
s, // Current Property
v // Current Value;
for(;i<il;i++) { // Loop Sheets
rules = cssSheets[i].rules || cssSheets[i].cssRules;
for(j=0,jl=rules.length;j<jl;j++) { // Loop Rules
rule = rules[j];
for(k=0;k<kl;k++){ // Loop Styles
s = stylesToSearch[k];
v = rule.style[s]; // Get Value from Current Style
if ( v !== undefined && v.toString().toLowerCase().indexOf("http") > -1 ) { // Seach for HTTP Content
//alert("Found HTTP at " + rule.selectorText + " " + s + " = " + rule.style[s]);
return true;
} else {
return false;
}
}
}
}
}
Question is, why would the code above always return false although it should return true?
I am calling the function as follows:
var cssresult = seachHttp();
I then use conditions to check if the result is true or false.
Sorry if this question is to vague.
Ignore my last post, my mistake. All sorted!
Hey AleMonteiro, I have some problems with undefined and null values with this code. Would you know how to reslove as I have been trying for ages
Hi darren, can you be a little more specific? What vars are undefined/null? What browser are you using?
Anyway, you should check if cssSheets, rules, and rule are defined.
I think that this function run on a page without CSS files, or with a file without rules would throw errors, but I did not test it.
On some sites rule.style is undefined such as Google. I have tried so many times to try accommodate this via conditions, etc but nothing has worked so far. Its only a selected few sites that have this issue and Google.com is the one I am using to try and resolve.
var seachHttp = function () {
var cssSheets = document.styleSheets, // Loaded CSS Sheets
i =0, il = cssSheets.length, // Counter and limit for sheets
j, jl, rules, rule, // Counter and vars for Rules inside a Sheet
stylesToSearch = [ // Properties to Seach HTTP ON
'background',
'background-image',
],
k, kl=stylesToSearch.length, // Counter for properties
s, // Current Property
v; // Current Value
//alert(cssSheets);
for(;i<il;i++) { // Loop Sheets
rules = cssSheets[i].rules || cssSheets[i].cssRules;
for(j=0,jl=rules.length;j<jl;j++) { // Loop Rules
rule = rules[j];
//alert(rule); //unde
//alert(k); //undef
for(k=0;k<kl;k++){ // Loop Styles
s = stylesToSearch[k];
//alert(s); //background
v = rule.style[s]; // Get Value from Current Style
//alert(v); //blank
alert(rule.type);
if (cssSheets[i].cssRules[j].type == window.CSSRule.STYLE_RULE) {
alert("Style is there")
return false;
}
if (typeof v === undefined) {
alert("NO HTTP " + v);
return false;
}
if ( typeof v !== undefined && v.toString().toLowerCase().indexOf("http") > -1 ) { // Seach for HTTP Content
alert("Found HTTP at " + rule.selectorText + " " + s + " = " + rule.style[s]);
return true;
}
}
}
}
return false;
}
This is my mod version with some condtions, etc
Thanks for your help!
Please be careful when you debug scripts and use return command; especially inside a loop. The reason is that it will exit the loop right after the return and you may miss what you are trying to do. To debug inside a loop for each loop value, you should use continue, but be warned that it could be very annoying if you use alert() inside a loop.
In your mod version, it will not finish the check but terminate the loop on the first round.
In your case, the issue is that you did not verify whether cssSheets, rules, or rule is defined. If any of these variables are undefined, your script breaks. You may not need typeof but simply use variable===undefined which should be suffice.
PS: I personally wouldn't script line 13 that way. If I'm going to use i in a loop, I would declare it inside for statement instead of outside. The same is applied to j variable...
Hi Taywin, thanks for your input.
I forgot to say that the "alerts" are only for debugging and will be removed.
When I try to add conditions to determine if a value exists, let’s say the value in question which is variable "v" OR "rule.style" is sort of works but I then have issues with sites which contain HTTP content. Thus the script does not work as intended. It’s a strange one but probably simple. Sorry I am still learning JavaScript so please bear with me.
OK, solved the "undefined" issue by adding something simple as:
if (rule.style === undefined) {
return false;
}
For some reason I didn't try that! Thanks for your help on this guys!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.