Jeg har et spørgsmål som måske forekommer underligt.
jeg har har ikke tidliger tænkt over at der er forskel på måden browser fortolker filtyper.
Men jeg sad og lavede en test side for en ven, da jeg opdagede den ret store forskel browser fortolker indlæste filer afhængig af om jeg bruger file extension .html eller uden file extension men med samme indhold.
Eksempel:
<!DOCTYPE html >
<html>
<head>
<title>demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
* {margin: 0;padding: 0;}
#mwrap, #header , #foot{width: 960px;}
#foot {clear: both;}
#mwrap {margin: 0 auto;background: #660;}
#left, #right { float:left;}
#left {width:180px;background: #777;}
#right {background: #888;width:780px;overflow: hidden;}
ul {list-style: none;margin:10px 0 10px 10px;}
#lmenu a {display: block;color: #fff;}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id='mwrap'>
<div id='header'>top</div>
<div id='left'>left</div>
<div id='right'>right</div>
<div id='foot'>foot</div>
</div>
<script type="text/javascript">
$(function(){
var array = ['header', 'left', 'foot'];
for (i in array)
{
console.log(array[i]);
$('#'+array[i]).load(array[i]+'', function(){ });
}
});
</script>
</body>
</html>
til attesten har jeg så lavet 3 filer (header - left - foot) header og foot filerne indeholder kun tekst mens left ser således ud:
<ul id='lmenu'>
<li><a>cont1</a>
<a>cont1</a>
<a>cont1</a>
<a>cont1</a></li>
</ul>
<script type="text/javascript">
$(function(){
$('#lmenu').on('click','a',function(){
$('#right').load('testtext');
});
});
</script>
Hvis jeg indlæser left filen med file extension .html er menuen død, men hvis jeg undlader file extension bliver scripten udført og menuen er aktiv.
Er der en enkel forklaring på denne forskel?