Is it possible to combine code angular with IE7?
What you need to mount and write to this minimum sample to work in IE7?
<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app='app'>
<head>
<!--[if lte IE 8]>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<title>Tests</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="ButtonCtrl" ng-init="name = ''">
<button id="start-button" ng-click="run('Brrrr!!!')">push</button>
<p>{{name}}</p>
<p ng-init="count = 0">{{count}}</p>
</div>
</body>
</html>
I've never tired with IE7 but for IE8 I put the below html in. Which basically polyfills
HTML5 elements, CSS3 selectors and media queries. You might also want to look at es5 shims (https://github.com/es-shims/es5-shim). However, it you use all the native angular methods i.e. angular.forEach(...) you might be ok without this. As always you need to really test this in all browsers!!!!
<!DOCTYPE html>
<!--[if IEMobile 7 ]>
<html class="no-js iem7" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="fsn"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!-->
<html class="no-js" id="ng-app" ng-app="fsn">
<!--<![endif]-->
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-switch');
document.createElement('ng-if');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<script src="../vendor/modernizr/modernizr.js"></script>
</head>
It is also worth looking at the APIs that IE7 wouldn't support 'console' for example. The angular team say they only support down to IE8 with Angular <1.2.x so you might have to play about with it to get it to work smoothly.
I have IE8 working well but it does noticeably struggle with loading some larger pages as it is so slow.
Related
I'm using ReactDOMServer to generate a static site via the server side and it doesn't seem to like this component specifically the opening <!DOCTYPE html> tag. (see below)
I'm doing this as I'm trying to use React to fully render a page via the server-side for IE8 compatibility and eventually become an isomorphic app.
Is there a best practice on how to fully render static markup with React via the server-side (with inclusions of the opening html tags, etc.)?
'use strict';
import React from 'react';
export default class Root extends React.Component {
render() {
return (
<!DOCTYPE html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
);
}
}
let html = ReactDOMServer.renderToStaticMarkup(<Root />);
Bonus: Although a simple DOCTYPE is breaking it, eventually I'd like to add additional IE tags like below at the top.
<!--[if lt IE 7]> <html dir="ltr" lang="en-US" class="no-js ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html dir="ltr" lang="en-US" class="no-js ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html dir="ltr" lang="en-US" class="no-js ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html dir="ltr" lang="en-US" class="no-js ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html dir="ltr" lang="en-US" class="no-js"> <![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
You'll likely want to emit the DOCTYPE header outside of your React component and replace <!DOCTYPE html> with an <html> node. JSX isn't HTML and just maps your elements to a corresponding React.createElement() call, which doesn't make sense for a DOCTYPE.
Take a look at these for reference:
Emitting a DOCTYPE before rendering the component
res.send('<!doctype html>\n' + ReactDOM.renderToString(<Html />));
An HTML component that handles tag generation
render() {
return (
<html lang="en-us">
<head></head>
...
</html>)
}
I'm editing someone elses webpage for content, by changing the HTML files on the drive, adding text, comments, wtv. I'm not a web designer, so this is the only way I knew to do it.
On most browsers, my changes show, but on internet explorer, sometimes it will revert to the old webpage. I can't find the info for the old page anywhere on the drive that holds all of this content. Please steer me in the right direction.
If it helps, each page starts like this (this part I haven't edited)
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en-us" class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en-us" class="no-js"> <!--<![endif] -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This Particular Pages Title</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css" >
<link href="style/less/main.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/business-custom.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><script src="selectivizr-min.js"></script>
<![endif]-->
I think IE uses caching.
By adding a random parameter to the URL the caching will be circumvented.
so e.g. www.mysite.nl?1
and then
www.mysite.nl?2
etc.
Here is my code.. I want to hide the button if the user is browsing with IE.
I tried like this but it's not working can any one help me out.
<!DOCTYPE html>
<html>
<head>
<script>
var lang = navigator.systemLanguage;
if (lang!='en-US'){
document.write("Well, this is not internet explorer");
} else{
document.write("This is internet explorer");
document.getElementById('btn1').style.visibility='hidden';
}
</script>
</head>
<body>
<p>This is a paragraph.
</p>
<button class="btn1">Input</button>
</body>
</html>
You may try conditional comments, without javascript:
<!--[if IE]>
<button>Not for IE</button>
<![endif]-->
And more:
<!--[if IE]>
According to the conditional comment this is IE<br/>
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br/>
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br/>
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br/>
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br/>
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br/>
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br/>
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br/>
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br/>
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9
<br/>
<!-- <![endif]-->
There are many ways to do that, there two of them:
Using CSS:
Add the below css class into your button and make it hide for IE browser, like
<!--[if gt IE 7]>
<style>.hideBtn{display:none}</style>
<!--<![endif]-->
Using Javascript:
window.navigator, by finding the browser version, make it hidden
document.getElementById('btn1').style.display = 'none';
thanks for your help i found the solution .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<!--[if IE]>
<style>.hideBtn{display:none}</style>
<![endif]-->
<script>
var lang = navigator.systemLanguage;
if (lang!='en-US'){
document.write("Well, this is not internet explorer");
} else{
document.write("This is internet explorer");
}
</script>
</head>
<body>
<p>This is a paragraph.
</p>
<button class="hideBtn" id ="hideBtn">Input</button>
</body>
</html>
I have a strange issue with my work.
While I do test on my local host of my web project while doing page source check i am getting following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Scripts/jquery-1.11.0.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/Content/style.css" />
</head>
<body>
Doctype seems to appear twice. But in my actual code it is only
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/Content/style.css" />
</head>
<body>
Any ideas why could it happen? I have created project in Visual Studio.
Thanks
I had a similar issue which may or may not apply to your case.
In my case, I had index.html which started like this..
<!--#include virtual="/common/incl/html.incl" -->
<head>
In html.incl I defined the doctype amongst other things..
<!doctype html>
<!--[if lt IE 8]><html class="no-js ie lt-ie9 lt-ie8" lang="en" itemscope itemtype="http://schema.org/" xmlns:fb="http://ogp.me/ns/fb#"><![endif]-->
<!--[if IE 8]><html class="no-js ie ie8 lt-ie9" lang="en" itemscope itemtype="http://schema.org/" xmlns:fb="http://ogp.me/ns/fb#"><![endif]-->
<!--[if IE 9]><html class="no-js ie ie9" lang="en" itemscope itemtype="http://schema.org/" xmlns:fb="http://ogp.me/ns/fb#"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en" itemscope itemtype="http://schema.org/" xmlns:fb="http://ogp.me/ns/fb#"><!--<![endif]-->
But when the source was generated it was generating a duplicate doctype appearing after the conditional comments.
When I removed the doctype declaration from the .incl file and instead declared it in the .html file BEFORE the include then it resolved the issue. .html documents are required to start with a document type declaration so since I was not initially defining one in the .html file, but rather in the .incl file, something else in my workflow was adding it for me.
How to prevent the load of the D3 library for IE8 (and below) ?
<head>
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
</head>
<head>
<!--[if !IE || gte IE 9]><!-->
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
<!-- <![endif]-->
</head>
<!--[if gt IE 8]>
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
<![endif]-->