Imprimir página siguiente con Java Script

Tengo un Frameset (puede ser un iFrame) con 3 frames: headerFrame, contentFramey footerFrame; en el header tengo los sgtes links: first page | next pag | prev pag | last pag | print pag
Y quiero que los contenidos de la barra de navegación se muestren en el "contentFrame", asi como que se IMPRIMA el contenido del "contentFrame"
Hasta ahora no puedo hacerlo y no quisiera el "prev pag" se haga en función del history pues se perdería el orden del listado.
SOn 20 páginas y los nombres correlativos sn: "arm001.html" hasta "arm026.html"

1 respuesta

Respuesta
1
¿Quieres qué se imprima el contenido actual del contentFrame, o quieres que se imprima toda la lista, independientemente de la página en la que te encuentres?
Saludos: Carlos.
Buenos días!
Tengo un Frameset (puede ser un iFrame) con 3 frames: headerFrame, contentFramey footerFrame; en el header tengo los sgtes links: first page | next pag | prev pag | last pag | print pag
y quiero que los contenidos de la barra de navegación se muestren en el "contentFrame", asi como que se IMPRIMA el contenido del "contentFrame"
Hasta ahora no puedo hacerlo y no quisiera el "prev pag" se haga en función del history pues se perdería el orden del listado.
SOn 20 páginas y los nombres correlativos sn: "arm001.html" hasta "arm026.html"
Muchas gracias por tu soporte, Buen fine de semana
Hola
<quote>Tengo un Frameset (puede ser un iFrame) con 3 frames: headerFrame, contentFramey footerFrame; en el header tengo los sgtes links: first page | next pag | prev pag | last pag | print pag
y quiero que los contenidos de la barra de navegación se muestren en el "contentFrame", asi como que se IMPRIMA el contenido del "contentFrame"</quote>
Me refiero a que cuando hago click in next page, se debe mostrar arm002.html en el CONTENTFRAME y que al imprimir, se imprima solo ese CONTENTFRAME.
Al hacer nueva, ente click en "nextpage" se debe mostrar arm003.html en el mismo CONTENTFRAME y al imprimir, se imprima nuevamente el mismo documento del CONTENT FRAME
Muchas gracias por tu atenta respuesta
Si usas un iframe, desde la página que contiene al iframe, puedes cambiar el contenido del iframe con:
document.frames.contentFrame.src='arm002.html'
, por ejemplo.
Créate funciones javascript a las que invoques al pulsar los botones 'siguiente' y 'anterior'. Guarda en un array de 26 posiciones todas las páginas a las que quieres acceder (arm001-0026.html). Guarda en una variable el número de página actual, para saber qué página debes mostrar cuando el usuario de a siguiente o anterior, actualizando el nº de página.
Para imprimir el contenido del iframe, puedes hacerlo con:
document.frames.contentFrame.focus();
document.frames.contentFrame.print();
Agradezco sobremanera tu respuesta PERO... Yo no soy programador y me hablaste en "chino". De todas maneras me va a venir bien un curso básico de JavaScript... pero para la próxima vez.
Por ahora veré si puedo conseguir el bendito script que funciones como dices.
De todos modos tu respuesta me suena como si me pidieras un consejo sobre el como dibujar (yo soy artista plástico) y yo te dijera, "trabaja bien la linea valorada, la armonía de contrastes en la forma y la valoración tinal en la contraforma" cuando bien podría darte una muestra del dibujo, funcional donde veas como se aplican los detalles de composición así me entenderías mejor.
Por lo quew veo deberé indagar sobre:
"Crear de funciones en JavaScript"
"Crear un Array"
"Creación de Variables en Java Script"
De veras esos datos me van a ser muy importantes, gracias por tu tiempo
Saludos cordiales
Te paso el código de una página que te puede servir para lo que quieres. Tendrás que cambiar los colores en los estilos, para que la línea valorada quede bien trabajada, los contrastes queden armoniosos y la contraforma quede bien valorada, tinalmente hablando, por supuesto:
<html>
<head>
<style>
.linkNavegacion{
font-weight:bold;
margin: 10px;
color:blue;
background-color:yellow;
border:solid 1px yellow;
}
.linkNavegacion:hover{
border:solid 1px red;
}
.linkNavegacionDisabled{
font-weight:bold;
margin: 10px;
color:silver;
background-color:white;
border:solid 1px white;
}
.footer{
font-style:italic;
color:green;
}
.spanPaginaActual{
font-size:15px;
margin: 10px;
}
</style>
<script>
var NUM_PAGINAS = 26;
var paginaActual;
var paginas;
function init(){
paginas = new Array(NUM_PAGINAS);
paginaActual=0;
var temp;
//Inicialización del array de páginas
for (ix=0; ix<paginas.length; ix++){
temp = "" + (ix +1);
while (temp.length < 3){
temp = "0" + temp;
}
paginas[ix] = "arm" + temp + ".html";
}
actualizaIframeContenido();
}
function actualizaIframeContenido(){
actualizaLinks();
document.frames.iframeContenido.src = paginas[paginaActual];
}
function actualizaLinks(){
document.getElementById("linkPrimera").className = "linkNavegacion";
document.getElementById("linkAnterior").className = "linkNavegacion";
document.getElementById("linkSiguiente").className = "linkNavegacion";
document.getElementById("linkUltima").className = "linkNavegacion";
if (paginaActual == 0){
document.getElementById("linkPrimera").className = "linkNavegacionDisabled";
document.getElementById("linkAnterior").className = "linkNavegacionDisabled";
}
else if (paginaActual == (NUM_PAGINAS-1)){
document.getElementById("linkSiguiente").className = "linkNavegacionDisabled";
document.getElementById("linkUltima").className = "linkNavegacionDisabled";
}
document.getElementById("spanPaginaActual").innerHTML = paginas[paginaActual];
}
function primera(){
paginaActual = 0;
actualizaIframeContenido();
}
function siguiente(){
if (paginaActual>=NUM_PAGINAS) return;
paginaActual++;
actualizaIframeContenido();
}
function anterior(){
if (paginaActual<=0) return;
paginaActual--;
actualizaIframeContenido();
}
function ultima(){
paginaActual = NUM_PAGINAS -1;
actualizaIframeContenido();
}
</script>
</head>
<body onload="init()">
<div id="div_header">
<a class="linkNavegacion" id="linkPrimera" href="javascript:primera()">Primera</a>
<a class="linkNavegacion" id="linkAnterior" href="javascript:anterior()">Anterior</a>
<span id="spanPaginaActual" class="spanPaginaActual"></span>
<a class="linkNavegacion" id="linkSiguiente" href="javascript:siguiente()">Siguiente</a>
<a class="linkNavegacion" id="linkUltima" href="javascript:ultima()">Ultima</a>
</div>
<div id="div_content">
<iframe name="iframeContenido" height="500px" width="95%"></iframe>
</div>
<div id="div_footer" class="footer">Pié de página</div>
</body>
</html>
Se me olvidaba el botón de imprimir. Aquí va:
<html>
<head>
<style>
.linkNavegacion{
font-weight:bold;
margin: 10px;
color:blue;
background-color:yellow;
border:solid 1px yellow;
}
.linkNavegacion:hover{
border:solid 1px red;
}
.linkNavegacionDisabled{
font-weight:bold;
margin: 10px;
color:silver;
background-color:white;
border:solid 1px white;
}
.footer{
font-style:italic;
color:green;
}
.spanPaginaActual{
font-size:15px;
margin: 10px;
}
</style>
<script>
var NUM_PAGINAS = 26;
var paginaActual;
var paginas;
function init(){
paginas = new Array(NUM_PAGINAS);
paginaActual=0;
var temp;
//Inicialización del array de páginas
for (ix=0; ix<paginas.length; ix++){
temp = "" + (ix +1);
while (temp.length < 3){
temp = "0" + temp;
}
paginas[ix] = "arm" + temp + ".html";
}
actualizaIframeContenido();
}
function actualizaIframeContenido(){
actualizaLinks();
document.frames.iframeContenido.src = paginas[paginaActual];
}
function actualizaLinks(){
document.getElementById("linkPrimera").className = "linkNavegacion";
document.getElementById("linkAnterior").className = "linkNavegacion";
document.getElementById("linkSiguiente").className = "linkNavegacion";
document.getElementById("linkUltima").className = "linkNavegacion";
if (paginaActual == 0){
document.getElementById("linkPrimera").className = "linkNavegacionDisabled";
document.getElementById("linkAnterior").className = "linkNavegacionDisabled";
}
else if (paginaActual == (NUM_PAGINAS-1)){
document.getElementById("linkSiguiente").className = "linkNavegacionDisabled";
document.getElementById("linkUltima").className = "linkNavegacionDisabled";
}
document.getElementById("spanPaginaActual").innerHTML = paginas[paginaActual];
}
function primera(){
paginaActual = 0;
actualizaIframeContenido();
}
function siguiente(){
if (paginaActual>=NUM_PAGINAS) return;
paginaActual++;
actualizaIframeContenido();
}
function anterior(){
if (paginaActual<=0) return;
paginaActual--;
actualizaIframeContenido();
}
function ultima(){
paginaActual = NUM_PAGINAS -1;
actualizaIframeContenido();
}
function imprimir(){
document.frames.iframeContenido.focus();
document.frames.iframeContenido.print();
}
</script>
</head>
<body onload="init()">
<div id="div_header">
<a class="linkNavegacion" id="linkPrimera" href="javascript:primera()">Primera</a>
<a class="linkNavegacion" id="linkAnterior" href="javascript:anterior()">Anterior</a>
<span id="spanPaginaActual" class="spanPaginaActual"></span>
<a class="linkNavegacion" id="linkSiguiente" href="javascript:siguiente()">Siguiente</a>
<a class="linkNavegacion" id="linkUltima" href="javascript:ultima()">Ultima</a>
<a class="linkNavegacion" id="linkImprimir" href="javascript:imprimir()">Imprimir</a>
</div>
<div id="div_content">
<iframe name="iframeContenido" height="500px" width="95%"></iframe>
</div>
<div id="div_footer" class="footer">Pié de página</div>
</body>
</html>
Ya veo que dibujo quedo bien... :) Gracias... al clickear en siguiente m muestra el nombre la página en la parte superior, ¿pero poden se supone esa página va a aparecer?
¿En quezona debo indicar que la pad arm005.html va a aparecer?
Pues ahora no aparece nada, la información indica sobre la página supuestamente caragada solo en navagación. Muchas gracias por el ejemplo es el más cercano a la solución que he encontrado en la red.
Sinceramente muchas gracias
Seguramente tendrás que hacer alguna adaptación del código. ¿Las páginas armXXX.html están en el mismo directorio que la página principal, o están en una subcarpeta?
HOla
Las páginas están en el root.
Dale una mirada a este printscreen
http://www.pixelperu.net/examples/muestra.jpg
hacerlo manualmente me soluciona el problema. SOlo que luego imprimir un pDF de la imagen mostrada es otra jarana.
Ahora son 10 páginas pero serán 20 y si se añaden m'as va a ser bien tedioso ()aunque no imposible tener que ingresar toda la data manualmente.
Gracias por tu apoyo
Si las páginas se llaman "arm001.html", "arm002.html", etc. deberían aparecer justo debajo de los links. Por favor, confírmame que el nombre de las páginas es el correcto.
Otra cosa: no entiendo lo que dices de "hacerlo manualmente". ¿A qué te refieres?
Al hacerlos manualmente me refiero a no meter ningún cofigo JaVaScript y poner los links en páginas individuales (no en frames) entonces la navegación debo ingresarla manualmente en NEXT PAGE | PREVIOUS PAGE y lo único que se mantendría igual sería FIRST PAGE and LAST PAGE-
LAs páginas se llaman: arm001.html arm002.html en la misma secuencia hasta el final
Gracias!
Efectivamente había un error en el código que te pasé. Te paso el código revisado:
<html>
<head>
<style> 
.linkNavegacion{ 
font-weight:bold; 
margin: 10px; 
color:blue; 
background-color:yellow; 
border:solid 1px yellow; 
} 
.linkNavegacion:hover{ 
border:solid 1px red; 
} 
.linkNavegacionDisabled{ 
font-weight:bold; 
margin: 10px; 
color:silver; 
background-color:white; 
border:solid 1px white; 
} 
.footer{ 
font-style:italic; 
color:green; 
} 
.spanPaginaActual{ 
font-size:15px; 
margin: 10px; 
} 
</style>
<script> 
var NUM_PAGINAS = 26; 
var paginaActual; 
var paginas; 
function init(){ 
paginas = new Array(NUM_PAGINAS); 
paginaActual=0; 
var temp; 
//Inicialización del array de páginas 
for (ix=0; ix<paginas.length; ix++){ 
temp = "" + (ix +1); 
while (temp.length < 3){ 
temp = "0" + temp; 
} 
paginas[ix] = "arm" + temp + ".html"; 
} 
actualizaIframeContenido(); 
} 
function actualizaIframeContenido(){ 
actualizaLinks(); 
document.getElementById("iframeContenido").src = paginas[paginaActual]; 
} 
function actualizaLinks(){ 
document.getElementById("linkPrimera").className = "linkNavegacion"; 
document.getElementById("linkAnterior").className = "linkNavegacion"; 
document.getElementById("linkSiguiente").className = "linkNavegacion"; 
document.getElementById("linkUltima").className = "linkNavegacion"; 
if (paginaActual == 0){ 
document.getElementById("linkPrimera").className = "linkNavegacionDisabled"; 
document.getElementById("linkAnterior").className = "linkNavegacionDisabled"; 
} 
else if (paginaActual == (NUM_PAGINAS-1)){ 
document.getElementById("linkSiguiente").className = "linkNavegacionDisabled"; 
document.getElementById("linkUltima").className = "linkNavegacionDisabled"; 
} 
document.getElementById("spanPaginaActual").innerHTML = paginas[paginaActual]; 
} 
function primera(){ 
paginaActual = 0; 
actualizaIframeContenido(); 
} 
function siguiente(){ 
if (paginaActual>=NUM_PAGINAS) return; 
paginaActual++; 
actualizaIframeContenido(); 
} 
function anterior(){ 
if (paginaActual<=0) return; 
paginaActual--; 
actualizaIframeContenido(); 
} 
function ultima(){ 
paginaActual = NUM_PAGINAS -1; 
actualizaIframeContenido(); 
} 
function imprimir(){ 
printIframe("iframeContenido"); 
} 
function printIframe(id){    
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;    
ifWin.focus();    
ifWin.print();    
return false;
}
</script>
</head>
<body onload="init()">
<div id="div_header"> 
<a class="linkNavegacion" id="linkPrimera" href="javascript:primera()">Primera</a> 
<a class="linkNavegacion" id="linkAnterior" href="javascript:anterior()">Anterior</a> 
<span id="spanPaginaActual" class="spanPaginaActual"></span> 
<a class="linkNavegacion" id="linkSiguiente" href="javascript:siguiente()">Siguiente</a> 
<a class="linkNavegacion" id="linkUltima" href="javascript:ultima()">Ultima</a> 
<a class="linkNavegacion" id="linkImprimir" href="javascript:imprimir()">Imprimir</a> 
</div>
<div id="div_content"> 
<iframe id="iframeContenido" name="iframeContenido" height="500px" width="95%"></iframe> 
</div>
<div id="div_footer" class="footer">Pié de página</div>
</body>
</html>
Carlos eres un maestro!
A pesar de haber lanzado la misma pregunta en varios foros eres la única persona que ha hecho que esto funcione como realmente quería lo que verdaderamente dice mucho de tu nivel de conocimiento en este tema, Te felicito y me felicito asimismo de haberme encontrado contigo.
Voy a implementar el archivo y te enviaré una muestra de lo que conseguí.
Por favor ponte en contacto conmigo a [email protected] te tengo una oferta especial.
Saludos cordiales

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

¿Por que no me funciona el javascript en firefox?

Estoy haciendo una pagina web y he hecho un menu con javascript, pero no consigo que funcione en FIREFOX, en IE, en safari, chrome me funciona. Pero me tiene que funcionar en firefox ya que es uno de los que mas se usan. ¿Veis algun fallo o me falta...
1 respuesta

Tengo un hoja de estilos externa pero en la parte de lo vinculos no me funciona

Tengo un hoja de estilos con el siguiente codigo . Acierto { font-family:Arial; font-size: 16px; color:green; background-color:yellow; /* sacado de la paleta http://jscolor.com/ */ text-align:center; } .no_acierto { font-family:Arial; font-size:...
2 respuestas

Tabs con jquery

Te pregunto de nuevo porque estoy intentando que me funcione un sistema de tabs -. El ejemplo es muy simple, pero era sólo para probarlo antes de realizar los "verdaderos"- pero no hay manera de que me funcione. Es un código que he reutilizado y he...
2 respuestas

Fijar un div o tabla para q no se cambie el ancho

Te escribo nuevamente por lo siguiente, estoy haciendo un blog, entonces la parte de los post, es decir de los registros del blog estaran del lado izquierdo, para poner otras cosas del lado derecho, la pregunta es: cuando hago un contenido muy largo...
1 respuesta

Tablas Especiales

Quisiera crear en mi Website una tabla como la que hay en la siguiente web: - www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"... El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras...
2 respuestas

Como mostrar solo 2 decimales en este código PHP

Tengo este código php en el cual cuando introduzco un numero en el campo precio se muestra un porcentaje de ese numero en el campo monto y monto2 El problema es que para algunos numero el resultado de esta operación muestra el numero en los campos...
1 respuesta

Separar el contenido del vaciado de una tabla con una linea

Ya solucione el problema se la imagen. Quisiera ahora separar la información con un <hr> osea cada vez Que muestra un hotel con su información separar de la otra, escondiendo el Borde de la tabla. He probado en todos lados pero no logro hacerlo. ¿...
1 respuesta

Como Redireccionar a url leída en un campo de mysql

Agradecería vuestra ayuda porque me he quedado para en este punto. Tengo una base de datos con los campos usuario, password y url ( cada usuario tiene su propia url) Tengo una web con un formulario de acceso y al validar los datos (usuario, password)...
1 respuesta

Visualización

Hice una página para un una universidad que me pidieron tero tengo problemas con la visualización esta es la dirección http://163.10.0.155/webproyecto2006/folder10/ Tengo problemas con los <div></div> y con las imágenes degrade si a la pantalla le...
1 respuesta

Posición de un div

Mi problema es sencillo pero no logro solucionarlo es el siguiente tengo una tabla <tabla> <tr> <td> <div class=menu9" ></div> </td> <td> un formulariio extenso </td> <tr> Resulta que el menu me sale en la mitad de la primera columna yo quiero que se...
1 respuesta