We are using Yii for our project. I am trying to conditionally register two JS scripts/assets in the header: one for IE8 and one for other browsers - using conditional comments (e.g. <!--[if lte IE 8]>).
However, I am only familiar with Yii::app()->clientScript->registerScriptFile and Yii::app()->clientScript->registerScript, none of which exposes a way to surround the registered script with a conditional comment.
I tried directly doing echo at the start of the controller action:
echo '<!--[if lte IE 8]><script src="'.$assetsPath . '/charts/r2d3.js'.'" charset="utf-8"></script><![endif]-->';
However, when I look in the source the script is displayed at the top of the document (before even <html>). If possible, I'd like to display it in <head>.
You could use the following extension
http://www.yiiframework.com/extension/ewebbrowser/
I put the file in component. Then just do in the code
$b = new EWebBrowser();
if($b->platform == "Internet Explorer" && $b->version == "8.0") {//you could explode version at the . I guess, however not sure if there is even a version 8.x or whatever
Yii::app()->clientScript->registerScriptFile("path/to/script");
} else {
Yii::app()->clientScript->registerScriptFile("path/to/otherscript");
}
I did test this with the current IE, Firefox and Chrome browser. I can not ensure this would work with other version of these browser. It two years old, but it still seems to be working.
You can set this in head as following,
Go to ->views->layouts->main.php
Simple add what ever the content you need after,
i.e
<!DOCTYPE html>
[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]
[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]
[if IE 8]><html class="no-js lt-ie9"> <![endif]
[if gt IE 8]><html class="no-js"> <![endif]
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
or if you need to check a browser version, in a controller and append scripts. this way would also work.
define this in controller,
public function beforeRender( $view ) {
//condition to check the browser type and version
if($browser = 'ie' && $version = '8') {
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/script.js');
return true;
}
}
// havent tested the second option. but should work.
you can check the browser type and version with any of the following,
<?php
echo $_SERVER['HTTP_USER_AGENT'];
$browser = get_browser(null, true);
print_r($browser);
?>
check this link, http://php.net/manual/en/function.get-browser.php#101125
This is not the optimum method, but you can achieve you goal using following code:
If you want above conditional statement for particular Controller, then:
Under you layouts/main.php
<?php if (Yii::app()->getController()->getId() == 'Your Controller Name'): ?>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->
<?php endif; ?>
If you want above conditional statement for Action of particular Controller, then:
Under you layouts/main.php
<?php if (Yii::app()->getController()->getId() == 'Your Controller Name' && Yii::app()->getController()->getAction()->getId() == 'Your Action Name'): ?>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->
<?php endif; ?>
Related
I got a scenario where I need a JavaScript to load in all browsers except IE7. Any help is greatly appreciated. I've tried the below code:
<!--[if gt IE 7]>
<script type="text/javascript">
//Some script XXX to execute
</script>
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<script type="text/javascript">
//Some script XXX to execute
</script>
<!--<![endif]-->
I think this works too
<!--[if !(IE 7)]>
// tag here
<![endif]-->
You can also do a combination of
<![if !IE]>
// script tag
<![endif]>
<!--[if (gte IE 8)&(lt IE 7)]>
// script tag
<![endif]-->
see docs here http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
I am not sure if you are looking to load an entire file or just a few lines of script. If it's only a few lines the jquery way is easier
Use navigator.userAgent to check the browser identification.
also see here
try this
if ( $.browser.msie == true && $.browser.version < 8) {
//code for ie 7
}
else
{
document.write("<script src=\"test.js\">");
}
Looks like you're already on the right lines with conditional comments
<!--[if !(IE 7)]>--><script>alert("I'm not IE7");</script><!--<![endif]-->
To any non-IE browser, this becomes
<!--[if !(IE 7)]>--> Comment
<script>alert("I'm not IE7");</script> Element
<!--<![endif]--> Comment
To any IE browser, this becomes
<!--[if !(IE 7)]> If not IE 7
--> (continued) AND Comment
<script>alert("I'm not IE7");</script> Element
<!--<![endif]--> Comment AND End if
From which, if it is IE 7, it gets snipped.
<!--[if !(IE 7)]> If - not rendered
SNIP
<![endif]--> End If
You could reduce this down if you don't mind invalid HTML
<![if !(IE 7)]><script>alert("I'm not IE7");</script><![endif]>
Is there a way to use HTML conditional tags like <!--[if (IE 6)|(IE 7)]> inside a .js file as I need to execute certain javascript if visitor is using IE6 or IE7?
Thanks
I'd do something like this with the markup...
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
Then in your JS, you can check for the appropriate body styles:
if (html tag has class lt-ie8) {
// we're in ie7 and below land
}
You can use conditional comments in your markup, and use the result to create conditional variables in your js. Start your doc with this:
<!DOCTYPE HTML>
<!--[if lte IE 7]><html lang="en" class="ieDetect ie7Detect"><![endif]-->
<!--[if IE 8]><html lang="en" class="ieDetect ie8Detect"><![endif]-->
<!--[if IE 9]><html lang="en" class="ieDetect ie9Detect"><![endif]-->
<!--[if !IE]>--><html lang="en"><!--<![endif]-->
I usually prefer to use jQuery for this and check for classes:
var ieDetect = $('.ieDetect').length
, ie7Detect = $('.ie7Detect').length
, ie8Detect = $('.ie8Detect').length
, ie9Detect = $('.ie9Detect').length
;
if (ieDetect){
// do stuff with IE
}
If you want to only use JS, you can either use a class fetching function and retain the markup above, or you could forgo the generic ieDetect class and just use ie7Detect (and 8,9) as IDs on the html tag.
var ie7Detect = document.getElementById("ie7Detect").length
, etc...
Separate JS files are the best option.
However you can use navigator.userAgent:
var userAgent = navigator.userAgent;
From this you can determine the browser the user is using to view your page and use the if statement built into JS.
User navigator.userAgent to check the browser the user has.
Recommended reading: http://api.jquery.com/jQuery.support/
How to identify the running Internet Explorer Versions which is IE7,IE8 or IE9. According to this, I need to call the css styles using the java script function. Please write that javascript code.
Help me
If your objective is purely to include specific stylesheets for specific versions of Internet Explorer, you want to use conditional includes:
HTML
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
And so on.
Usually detecting features is the best thing, but a fairly good point in this special case is detecting the existence of conditional comments, which are supported by IE only.
Here's what I usually do:
var div = document.createElement("div"), IE;
div.innerHTML = "<!--[if IE 5]>5<![endif]--><!--[if IE 5.0]>5.0<![endif]--><!--[if IE 5.5]>5.5<![endif]-->\
<!--[if IE 6]>6<![endif]--><!--[if IE 7]>7<![endif]--><!--[if IE 8]>8<![endif]--><!--[if IE 9]>9<![endif]-->";
IE = d.firstChild && d.firstChild.nodeType===3 ? +d.innerHTML : false;
Launched my website – http://www.artsbrand.co.uk – yesterday without having tested the finished product on IE. Now that I have, it initially brings up completely unstyled html, then after a couple of seconds the screen just goes blank. When that happens, this is the only thing in the source:
<script defer onreadystatechange='google.loader.domReady()' src=//:></script>
Does this have something to do with my Google Custom Search Engine?
I have a few conditional comments, which I'll list below in case they're important:
First I set up the html class (the no-js class is for Modernizr):
<!--[if lt IE 7 ]><!--> <html class="ie ie6 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 7 ]><!--> <html class="ie ie7 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 8 ]><!--> <html class="ie ie8 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 9 ]><!--> <html class="ie ie9 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"><!--<![endif]-->
Then I set up three different stylesheets with media queries:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
This one's just for Sticky Footer (as per the instructions here http://www.cssstickyfooter.com/style.css ):
<!--[if !IE 7]><!-->
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<!--<![endif]-->
I only have access to IE7 and IE9, but the behaviour is exactly the same in both of those – 1-2 seconds of unstyled page (I saw a split second of CSS once in IE9!) followed by sheer blankness. I'd be very grateful for any help you guys can offer!
EDIT - I'm less convinced it has anything to do with conditional comments now – I just tried getting rid of all of them and it made no difference at all. I should probably also mention that I've tried both versions of Google CSE (Search Element V1 and Search Element V2) and the results were the same.
UPDATE - I've got a fairly messy workaround now, although the search will have to be out of action in IE for now. The problem was a combination of my dodgy use of media queries/conditional comments (I'm new to both of them!) and the still unknown issue that's causing IE to react badly with the Google CSE. So anyway here's what my stylesheet links look like now:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<![endif]-->
Meanwhile the search script is wrapped in [if !IE] comments.
This is just a guess because I can't get my IE7 machine to boot right now, but I think it may be because the script you have is before the closing head tag.
From what I remember, IE does weird things when you try to access elements on the page that haven't been fully parsed yet.
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); is essentially trying to insert the new script tag before the very first script tag, which is inside the uncompleted head tag.
I thought s.parentNode would be null (or undefined) in this case, but apparently it's something else, maybe the whole document? Who knows, IE does crazy things.
At any rate, what I'd try is moving that google script tag inside the body of your page, instead of in the head, and see if that makes a difference.
As for the CSS, IE before 9 doesn't support media queries. You can use something like respondjs to make it work in IE, but you need to put the queries in the CSS file, not in the link tag itself.
I wonder if there is the possibilaty to load some javascript files only if its not the IE 8 like this:
<!--[if NOT IE 8]>
<script type="text/javascript" src="assets/scripts/slideshow.js"></script>
<![endif]-->
<!--[if IE 8]>
<script type="text/javascript" src="assets/scripts/slideshowOnlyForIE8.js"></script>
<![endif]-->
Try this (cited from here)...
<!--[if !IE 8]><!-->
<script type="text/javascript" src="assets/scripts/slideshow.js"></script>
<!--<![endif]-->
<!--[if IE 8]>
<script type="text/javascript" src="assets/scripts/slideshowOnlyForIE8.js"></script>
<![endif]-->
I assume that you are either limited by a feature that IE8 lacks or taking advantage of an IE8 specific feature. In this case, the best thing to do is test for that gating feature.
Basically, combine the two scripts into one, and kick it off with a simple if test to see if your feature is available:
if(crucialIEFunction()) {
//run IE8 slideshow code
}
else
{
//run non IE slideshow code
}