Muy buenas, agradeceria si me pudieseis explicar como hacer lo siguiente:
Tengo 2 archivos HTML. Uno sería la 'home', por decirlo así, el otro, es un documento con la siguiente estructura:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<title></title>
<script type="text/javascript" src="****_productos_plantilla_scripts.js"></script>
<style>
body { margin:0; padding:0; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:0.9em; font-family:"kozgopro-extralight"; src: url('kozgopro-extralight.otf') format(“opentype”); }
/* Estilos para el DOCUMENTO */
@font-face { font-family: "kozgopro-extralight";src: url("kozgopro-extralight.otf") format("opentype");}
#kontainer { width:700px; height:100%; margin-left:50%; margin-bottom:50px; padding:0; position:relative; left:-350px; font-size:1em;}
#cabecera { width:100%; background-image:url(cabecera.png); background-position:center; background-repeat:no-repeat; width:100%;
height:110px; border-bottom:2px solid rgb(186,0,181); cursor:pointer; }
#cabecera>div { height: 110px; width: 100%;}
/* Estilos para "galería de imágenes" */
#images { background: #CCC; border-bottom: 1px solid rgb(186,0,181); border-top: 1px solid rgb(220,127,218);
display: block; height: 145px; max-height: 500px;}
#images2 { background: none; border: 1px solid #666; margin-top: 20px;}
#images2 p { margin-top:50px;}
#vistaprevia { border: 1px solid #666; display: block; margin: 10px; width:auto;}
#titulo_foto { position:absolute; top:20px; left:20px; }
#img_prev { background: #FFF; border: 1px solid #666; display: block; height: 100px; left: -302px; margin-left: 50%;
margin-top: 20px; position: relative; width: 604px;}
#img_prev ul { display: block; margin: 0; margin-left: auto; padding: 0; text-align: center;}
#img_prev ul li { border-left: 1px dotted black; display: block; float: left; height: 100px; list-style: none; width: 100px;}
#img_prev ul div :first-child { border:none; cursor:pointer;}
#img_prev_ { width: 615px;}
.sombra { background:url(1.png); position:relative; width:100%; height:100%; z-index:10}
.sombra:hover { background:none;}
.miniatura { display:block; background:none; position:relative; top:-100px; width:100%; height:100%; z-index:9;}
#title { display:block; border-bottom: 1px solid rgb(186,0,181); color: #666; display: block; font-size: 1.5em; position: relative; text-align: left; text-transform: uppercase;}
/* Estilos para contenido TEXTO */
#content { display: block; margin-left: 20px; margin-right: 20px; position: relative; text-align: justify;}
.titulo { display:block; font-size:1em; color:#751848; text-transform:uppercase; margin-top:50px;}
.subtitulo { display:block; font-size:1.2em; font-weight:normal; text-decoration:underline; text-transform:uppercase; color:#751848; margin-top:10px; padding-left:50px;}
.parrafo_indent_1 { display:block; margin:0px; margin-top:10px; word-wrap: break-word; overflow:hidden;}
.parrafo_indent_2 { display:block; margin-left:15px; margin-top:10px;}
.parrafo_indent_3 { display:block; margin-left:30px; margin-top:10px;}
.listas { display:block; font-size:1em; list-style:circle; color: #751848;}
.listas p { color:#000; line-height:0.5em;}
.listas li:hover { list-style:disc;}
blockquote { background:#CCC; display: block;padding: 0 100px;width:75%; font-style:italic; color:#333; margin-left:-20px;}
blockquote:before, blockquote:after {color:#751848;display: block;font-size: 420%;}
blockquote:before {content: '\201C';height: 0;margin-left: -0.8em; padding-top:10px;}
blockquote:after {content: '\201D';height: 30px;margin-top: -25px; padding-bottom:10px;margin-left: 8.5em;}
/* Estilos para menú de navegación principal y cabecera */
ul.navigator,
ul.navigator li,
ul.navigator ul { margin: 0; padding: 0; font-weight:bold; border-top:1px solid rgb(186,0,181); list-style: none; }
ul.navigator { position: relative;z-index: 597; float: left; }
ul.navigator li { padding: 7px 10px; float: left; line-height: 1.3em; border-style: solid; border-width: 1px 1px 1px 0; border-color: #fff #fff rgb(238,191,236) #fff; background-color:#f1f1f1; color: #000; }
ul.navigator li.hover,
ul.navigator li:hover { position: relative; z-index: 599; cursor: default; background-color:#e7e7e7; color: #000; }
ul.navigator>li a:hover { color:#751848; }
ul.navigator ul { margin-top: 1px; visibility: hidden; position: absolute;top: 100%; left: 0; z-index: 598; width: 100%; width: 150px; }
ul.navigator ul li { float: none; font-weight: normal; }
ul.navigator ul ul { top: -3px; left: 100%; }
ul.navigator li:hover > ul { visibility: visible; }
ul.navigator a:link,
ul.navigator a:visited { color: #000; text-decoration: none; }
ul.navigator a:hover { color: #000; }
ul.navigator a:active { color: rgb(186,0,181); }
#menu_nav { margin-left:-200px; position:absolute; top:111px; left:50%; }
#menu_nav li { cursor:pointer;}
#menu_nav li a { font-weight:bold;}
</style>
</head>
<body onload="carga()">
<div style="position:absolute; top:110px; width:100%; border-bottom:2px solid rgb(186,0,181);"></div>
<div id="kontainer">
<div id="cabecera"><div onClick="window.location.reload()"></div></div>
<div id="title">
<p class="titulo">
»<script>document.write(varFamilia_formato)</script>
</p>
</div>
<div id="images">
<div id="img_prev">
<ul>
<div id="img_prev_">
<li id="imagen1" onclick="previo('Título imagen','fotodeprueba.jpg')">
<a class="sombra" style="display:block;"></a>
<script>document.write(miniFoto1)</script>
</li>
<li id="imagen2" onclick="previo('#CC66CC')">
<a class="sombra" style="display:block;"></a>
<script>document.write(miniFoto2)</script>
</li>
<li id="imagen3" onclick="previo('#FFCCFF')">
<a class="sombra" style="display:block;"></a>
<script>document.write(miniFoto3)</script>
</li>
<li id="imagen4" onclick="previo('#FF0000')">
<a class="sombra" style="display:block;"></a>
<script>document.write(miniFoto4)</script>
</li>
<li id="imagen5" onclick="previo('#00FF00')">
<a class="sombra" style="display:block;"></a>
<script>document.write(miniFoto5)</script>
</li>
<li id="imagen6" onclick="previo('#0000FF')">
<a class="sombra" style="display:block;"></a>
<script>document.write(miniFoto6)</script>
</li>
</div>
</ul>
</div>
</div>
<div id="images2" style="display:none;">
<p>
<div id="titulo_foto"></div>
<a style="float:right;cursor:pointer; position:absolute; top:20px; right:20px;" onclick="chapa()">[cerrar]</a>
</p>
<p id="vistaprevia" style="display:block">
</p>
</div>
<div id="content"> <!--Introducir Variable Javascript-->
<p class="parrafo_indent_1">
<script>document.write(varNombre_formato)</script>
<script>document.write(varDescripcion)</script>
</p>
<p class="parrafo_indent_3">
</p>
<blockquote>
<script>document.write(varQuote);</script>
</blockquote>
</div>
<div>
<div style="width:100%; height:110px;" onClick="window.location.reload()"></div>
<ul id="menu_nav" class="navigator navigator-horizontal">
<li><a href="./****.html#nav****">*****</a></li>
<li><a href="./****.html#navContacto">Contacto</a></li>
<li><a href="./****.html#navProductos">Productos</a></li>
<li><a href="http://www.****.com" target="_blank">****.com</a></li>
</ul>
</div>
</div>
</body>
</html> Como veis, imprime unas variables mediante
document.write
Encontré un método para pasar las variables entre documentos:
En la página de origen:
Código:
<a href="destino.htm?var1=1&var2=2"></a>
Código:
/* Pasar variables de una página a otra */
function pasarVariables(pagina,nombres){
pagina +="?";
nomVec=nombres.split(",");
for(i=0;i<nomVec.length;i++)
pagina +=nomVec[i] + "=" + escape(eval(nomVec[i]))+"&";
pagina=pagina.substring(0,pagina.length-1);
location.href=pagina;
}
En la página de destino:
Código:
<script>document.write(var1)</script>
Código:
/* Pasar variables de una página a otra */
function pasarVariables(pagina,nombres){
pagina +="?";
nomVec=nombres.split(",");
for(i=0;i<nomVec.length;i++)
pagina +=nomVec[i] + "=" + escape(eval(nomVec[i]))+"&";
pagina=pagina.substring(0,pagina.length-1);
location.href=pagina;
}
Al tener que introducir una cantidad considerable de datos, me quedan unas url larguísimas, y no solo es antiestético, si no que es un coñazo a la hora de modificar lo que sea.
Hay algun modo de hacer esto de otra forma? cargando documentos de texto o algo parecido?