Cómo evitar los anclajes en iframes para desplazar la página primaria

Question

Entonces, aquí está el problema: tengo una página bastante larga con un iframe en el medio. Ahora, si se hace clic en un ancla en el iframe, toda la página se desplaza al iframe, que es lo que quiero evitar.

He aquí un ejemplo: http://jsfiddle.net/ymbV7/1/ no se desplazan hacia abajo la página, pero el iframe desplazarse hasta que pueda ver el menú "contenido" y probar cualquiera de los enlaces (por ejemplo, "Características").

Necesito que la página externa no se desplace, mientras que el iframe tiene que desplazarse correctamente al ancla chascada.

¿Alguna idea?

Answer 1

tratar de poner su contenido en una tabla como la siguiente:

<table cellpadding=0 cellspacing=0 height="100%" width="100%"> 
    <tr> 
    <td> 
     Header 
    </td> 
    </tr> 

    <tr> 
    <td> 
     <iframe src="http://en.wikipedia.org/wiki/jQuery" height=600 width="90%"></iframe> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Footer 
    </td> 
    </tr> 
</table> 

Consulte http://www.webdeveloper.com/forum/showthread.php?t=212032

Answer 2

Así que están diciendo que desea pasar a un párrafo en particular cuando se hace clic en el enlace que describe el detalles del enlace ¿verdad?

De acuerdo con lo que entiendo, usted puede hacer esto.

<a href="#exactline">Click here</a> 

En lugar de Click aquí se puede escribir funciones, a partir de lo que vi en http://jsfiddle.net/ymbV7/1/

ahora para vincular al lugar donde debe mover todo lo que necesita hacer es lo siguiente:

<h2><a name="exactline">Linking Directly from Features</a></h2> 
<p>To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to. 
</p> 

"exactline" es el nombre del enlace dado al para o encabezado a qué hacer referencia.

Se desplaza sólo el iframe y no toda la página ..

refieren este enlace para obtener más espacio libre

http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml

intenté y funcionó para mí

Answer 3

Creo que si se hizo <a target="name of iframe" href="#name of anchor">Click here</a> funcionaría porque entonces el enlace se está abriendo en el iframe y es posiblemente por eso que el ancla hizo que toda la página se desplazara al iframe. ¡Espero haber ayudado y espero que funcione! :)

Answer 4

Probar varias combinaciones de configuración de la ubicación del marco o el hash todavía desafortunadamente resultó en el desplazamiento principal.

Así que esto es lo que terminé haciendo ya que el contenido del iframe estaba en el mismo dominio, por lo que no había un problema entre sitios navegando por el marco DOM.

Modifiqué los enlaces en el elemento primario así que en lugar de hacer target="myiframe", agregué una función en punto para hacer el desplazamiento omitiendo la implementación predeterminada (que parece hacer que el padre salte al iframe).

función

<a onclick="linkFunction(this, event);return false;"... 

El enlace es el siguiente:

/// for scrolling iframe without jumping parent page 
function linkFunction(atag, event) { 
    event.preventDefault(); 
    var iframe = document.getElementById('myiframe'); 
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document; 
    var name = atag.href.split('#')[1]; // get the hash 
    var anchor = innerDoc.getElementsByName(name)[0]; // find the corresponding anchor tag 
    // get position of the anchor relative to the current scroll position 
    var offset = anchor.getBoundingClientRect().top 
    // jump scroll the iframe content to the anchor 
    iframe.contentWindow.scrollBy(0, offset) 
} 

Sin jQuery y todavía funciona correctamente si JavaScript desactivado (solo vuelve a saltar la matriz por defecto).

Espero que esto ayude a alguien más.

Answer 5

Quizás sea un error en Chrome, porque este problema no ocurre en los últimos IE y Firefox.

Ocurrió cuando se hizo clic en el ancla en el iframe, y el navegador intenta alinear el ancla en la parte superior de la ventana.

que resolvieron este problema, utilice Javascript (jQuery):

$('body').on('click', 'a', function(e) { 
    if($(this).attr('href').startsWith('#')) { 
     e.preventDefault(); 
    } 
}); 

espero que le puede ayudar a & buena suerte!