Jquery .load() can't load style and js in html file on Chrome and Safari??

Jquery .load() can't load style and js in html file on Chrome and Safari??


I use $("#mydiv").load() to load a html file that has its own style
and js, on IE and Firefox, it work good, but on Safari and Google
Chrome, it can't load style and js in the html file, how can I fix
it?
example:
MainPage.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Page</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").load("test.htm");
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
SubPage.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sub Page</title>
<style type="text/css">
#box {
height:400px;
width:400px;
background:red;
}
</style>
<script type="text/javascript">
alert("Hello!");
</script>
</head>
<body>
<div id="box">Test Box</div>
</body>
</html>
on IE and Firefox,it alert "Hello" and show a red box, but on Chrome
it show text only, no alert, no style.