jQuery awkward behaviour
I am trying to load a page throughout ajax, the whole page, and formating mine as it finds in the loaded one. Something of a practical exercise.
The result of the ajax call is a string containing the page's html.
To make it simple, I made an example, with a string containing something of a page itself.
<html>
<head>
<title>some test</title>
<style type="text/css">
.dv810 { height:810px; }
</style>
<script src="Scripts/Ref/jquery.js"></script>
<script type="text/javascript">
var sPage =
+'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
+ '\n<html xmlns="http://www.w3.org/1999/xhtml">'
+ '\n<head>'
+ '\n <title>some test</title>'
+ '\n <style type="text/css">'
+ '\n'
+ '\n #dvMain { height:830px; }'
+ '\n'
+ '\n </style>'
+ '\n</head>'
+ '\n<body>'
+ '\n <div class="container_12 mainContainer">'
+ '\n <div id="dvMain" class="dv810"></div>'
+ '\n <br/>'
+ '\n </div>'
+ '\n</body>'
+ '\n</html>';
alert('#dvMain: ' + $('#dvMain',开发者_如何学Python $(sPage)).css('height'));
</script>
</head>
<body>
</body>
</html>
I got this awkward behavior when trying to pull one's css property, like height:
- Firefox: #dvMain.height: 810px
- Chrome: #dvMain.height:
- IE8: #dvMain.height: 830px
- IE8 (with IEtester): #dvMain.height: 830px
- IE7 (with IEtester): #dvMain.height: 830px
- IE6 (with IEtester): #dvMain.height: 830px
As it seems:
- IE understands the css in the string, hell knows how (although that is a strange behaviour, I kinda like it, although I think I would not use it much),
- Firefox behaves as I think it would be accurate, gets the class from style in the rendered page,
- Chrome for my surprise, does not understand or don't relate it, uhn,.. well, just show nothing Does anyone knows why?
Judging by your varied results i think its a matter of dom processing time i wonder if the results are different by amending the code like so:
var $sPage = $(sPage);
alert('#dvMain: ' + $('#dvMain', $sPage).css('height'));
OR
$(sPage).ready(function(){
alert('#dvMain: ' + $('#dvMain', $(sPage)).css('height'));
});
加载中,请稍侯......
精彩评论