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.
Related
I have set up a html page that contains a button that when clicked, activates a function from an external javascript file. The JS file in question imports two other functions from another JS file. However when I load the html file in my browser (Safari 12.0.2) and look at it in the debugger, I get an error stating "SyntaxError: Unexpected token '{'. import call expects exactly one argument."
The files are named "html_test_run.html", "test_run_javascript.js" and "export_test_run.js". I have tried setting the type of the script to "module" but that only resulted in a new error that said "Origin null is not allowed by Access-Control-Allow-Origin". I have also attempted to have three html tags, the first two had the source of the js files and the third defined a new function that the button would use instead, that didn't work either.
<!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">
<title>Test run</title>
<meta name="description" content="Test run">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link rel="stylesheet" href="">
-->
<script type="text/javascript" src="assets/test_run_javascript.js">
</script>
</head>
<body>
<button type="button" name="button" onclick="doSomething()">Click me</button>
</body>
</html>
First JS file:
import {doSomethingElse1, doSomethingElse2} from "export_test_run.js";
function doSomething(){
doSomethingElse1();
doSomethingElse2();
console.log("Test successful");
}
Second JS file:
function doSomethingElse1(){
console.log("Test successful1");
}
function doSomethingElse2(){
console.log("Test successful2");
}
export {doSomethingElse1, doSomethingElse2};
I expected the files would load correctly and the button would call the function "doSomething()" when clicked.
Any help would be greatly appreciated.
You have to correctly include a script on your page showing that the script type is "module":
<script src="/js/index.js" type="module"></script>
In case if the browser doesn't support modules you can simply process that using "nomodule" attribute:
<script nomodule>
console.info(`Your browser doesn't support native JavaScript modules.`);
</script>
You can include the two of your js files in the first page:
<script type="text/javascript" src="export_test_run.js">
</script>
<script type="text/javascript" src="assets/test_run_javascript.js">
</script>
Remove the export and import code from your js files!
Use the correct paths for the including.
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.
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.
I'm developing a Grails project which is using some JS code. It runs perfectly in Google Chrome (v34.0.1847.116 m) and Mozilla Firefox (v28.0), but it simply does not run/start in IE (v9.0.23). I just have a blank screen.
According to many previous answers on SO community, I should be checking some meta tags which I'm using, but it's not running successfully anyway. There goes my code!
page.gsp, used as main layout:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="win firefox firefox2 gecko gecko2" lang="br">
<!--[endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title><g:layoutTitle default="A nice Title"/></title>
<r:require modules='core'/>
<g:layoutHead />
<r:layoutResources />
</head>
<body>
<div id="container">
<div id="header">bla bla bla<g:navbar /></div>
<g:menu menuKey="1"/> <!-- a taglib which builds a dynamic menu -->
<div id="content">
<g:layoutBody />
</div>
</div>
<div id="footer"><div class="container">bla bla bla</div></div>
<r:layoutResources/>
</body>
</html>
home.gsp, a simple view to be loaded in the layout above.
<html>
<head>
<meta name="layout" content="page" />
</head>
<body>
<h2>A simple content here</h2>
</body>
</html>
I'm loading all my JS and CSS resources using ApplicationResources.groovy but I don't have any JS error according my Firebug. After all, what else could I check or what features/functions' success must I asure?
Change
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="win firefox firefox2 gecko gecko2" lang="br">
<!--[endif]-->
to (properly close the else comment)
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="win firefox firefox2 gecko gecko2" lang="br">
<![endif]-->