Página con funciones dentro de otra página

#1 (**permalink**) 15/12/2011, 05:22

Buenas, me gustaría saber si el siguiente código es correcto:

principal.html:

Código:

<html>
	<head>
		<title>PÁGINA DE PRUEBAS</title>
	
		<script type="text/javascript" src="jQueryPer(1.7.1).js"></script>
		<script type="text/javascript">
		
		function prueba()
		{
			$("#boton").load("datos.html");
			alert("prueba1");
		}
		
		</script>
	
	</head>
	
	<body>
		<div id="boton" style="background-color: red" onClick="prueba()">Cargar</div>
	</body>
</html>

datos.html:

Código:

<html>
	<head>
		<script type="text/javascript">
		function prueba2()
		{	
			alert("prueba2");
		}
		</script>
	</head>

	<div id="2" onClick="prueba2()">
		Contenido nuevo
	</div>
</html>

El caso es que tengo dos páginas que están pensadas para funcionar de manera independiente, pero en algunos casos me puede interesar mostrar la segunda (datos) dentro de la primera (principal). Esto lo hago utilizando AJAX y, en principio, funciona todo correctamente: aparece el contenido de la segunda página dentro de la primera y me permite llamar a la función prueba() (que no existía en datos.html) al mismo tiempo que sigue funcionando la función prueba2().

Lo que no tengo claro es si es correcto importar la página entera con sus funciones, hojas de estilo... y también me pregunto qué pasa con la función prueba2(), ¿no debería aparecer en el código fuente de la página una vez cargada?

Gracias!