Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/02/2016, 08:13
altrisi
 
Fecha de Ingreso: febrero-2016
Mensajes: 7
Antigüedad: 8 años, 3 meses
Puntos: 0
Detectar por donde va el Iframe (src)

Tengo una pagina web con un iframe y dos botones (uno para avanzar y otro para retroceder en el iframe). Esto funciona muy bien, pero querría hacer que en la primera pagina no se mostrara el botón de "Anterior" y que en la última no se mostrara el de "Siguiente".
La pagina que avanza/retrocede carga mas tarde.

Mi HTML es el siguiente:

Código HTML:
<iframe src="/" id="general" frameborder=0 marginheight="0" marginwidth="0" width="100%" height="100%"></iframe>
<div class="next" onclick="guiaPag(1)"></div>
<div class="prev" onclick="guiaPag(-1)"></div> 
El Javascript este:

Código Javascript:
Ver original
  1. var cnt=0,webpageArray = [
  2.           "/Guia/pag1.html",
  3.           "/Guia/pag2.html",
  4.           "/Guia/pag3.html"
  5.       ];
  6.  
  7.       function guiaPag(dir) {  
  8.         cnt+=dir;
  9.         if (cnt<0) cnt=webpageArray.length-1; // wrap
  10.         else if (cnt>= webpageArray.length) cnt=0; // wrap
  11.         var iframe = document.getElementById("general");
  12.         iframe.src = webpageArray[cnt];
  13.         return false;
  14.       }

Como podría hacerlo? Me encantaría que alguien me ayudase.

Aviso: No hace falta que se remueva completamente/otros. Tengo en un css que al añadirle la class "hidden" se esconda.

Codigo CSS (No creo que haga falta pero por si acaso):

Código CSS:
Ver original
  1. /* --------------------------------
  2.  
  3.           CSS Next-Prev
  4.  
  5. --------------------------------*/
  6.  
  7. .prev {
  8.   position: fixed;
  9.   height: 10%;
  10.   background: transparent padding-box;
  11.   left: 0;
  12.   top: 45%;
  13.   border: 1px solid transparent;
  14.   border-radius: 3px;
  15.   cursor: pointer;
  16.   transition-property: background-color, border-color, box-shadow;
  17.   transition-duration: 150ms;
  18. }
  19.  
  20. .prev:hover {
  21.   background-color: hsla(211,79%,6%,.03);
  22.   border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
  23. }
  24.  
  25. .prev:hover:active {
  26.   background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05));
  27.   border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25);
  28.   box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset,
  29.               0 0 1px hsla(211,79%,6%,.1) inset;
  30.   transition-duration: 0ms;
  31. }
  32.  
  33. .next {
  34.   position: fixed;
  35.   height: 10%;
  36.   background: transparent padding-box;
  37.   right: 0;
  38.   top: 45%;
  39.   border: 1px solid transparent;
  40.   border-radius: 2px;
  41.   cursor: pointer;
  42.   transition-property: background-color, border-color, box-shadow;
  43.   transition-duration: 150ms;
  44. }
  45.  
  46. .next:hover {
  47.   background-color: hsla(211,79%,6%,.03);
  48.   border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
  49. }
  50.  
  51. .next:hover:active {
  52.   background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05));
  53.   border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25);
  54.   box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset,
  55.               0 0 1px hsla(211,79%,6%,.1) inset;
  56.   transition-duration: 0ms;
  57. }
  58.  
  59. .hidden {
  60.   display: none;
  61. }
  62.  
  63. .hidden {
  64.   display: none;
  65. }
  66.  
  67. .prev::before {
  68.   content: url("/No%20mostrar/img/prev.png")
  69. }
  70.  
  71. .next::before {
  72.   content: url("/No%20mostrar/img/next.png")
  73. }

Última edición por altrisi; 14/02/2016 a las 14:23