Jak uniknąć zakotwiczeń w elementach iframes, aby przewinąć stronę nadrzędną?

Question

Oto więc problem: Mam dość długą stronę z elementem iframe w środku. Teraz, jeśli kotwica zostanie kliknięta w elemencie iframe, cała strona zostanie przewinięta do elementu iframe, czego właśnie chcę uniknąć.

Oto przykład: http://jsfiddle.net/ymbV7/1/ Nie przewijaj strony w dół, ale przesuwaj element iframe, aż zobaczysz menu "Spis treści" i spróbuj któregokolwiek z linków (na przykład "Funkcje").

Potrzebuję strony zewnętrznej, aby nie przewijać, podczas gdy element iframe musi poprawnie przewinąć do klikniętej kotwicy.

Wszelkie pomysły?

Answer 1

spróbować umieścić swoją zawartość do tabeli jak poniżej:

<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> 

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

Answer 2

Więc mówisz, że chcesz przejść do konkretnego ustępu po kliknięciu na link który opisuje szczegółowy link w prawo?

Zgodnie z tym, co rozumiem, możesz tak postąpić.

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

Zamiast kliknij tutaj możesz napisać funkcje, jak z tego co widziałem w http://jsfiddle.net/ymbV7/1/

teraz odwołuje się do miejsca, w którym powinien poruszać się wszystko, co musisz zrobić to:

<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" to nazwa linku nadana paragrafowi lub nagłówek, do którego należy się odnieść.

przewija tylko iframe, a nie cała strona ..

patrz link, aby uzyskać więcej odprawy

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

Próbowałem i pracował dla mnie

Answer 3

myślę, że jeśli zrobił <a target="name of iframe" href="#name of anchor">Click here</a> to zadziała, ponieważ wtedy link jest otwierany w elemencie iframe i być może dlatego kotwica sprawiała, że ​​cała strona przewijała się do elementu iframe. Mam nadzieję, że pomogłem i mam nadzieję, że to działa! :)

Answer 4

Próba różnych kombinacji ustawień położenia ramki lub skrótu niestety zakończyła się przewijaniem rodzica.

Tak właśnie zrobiłem, ponieważ zawartość elementu iframe znajdowała się w tej samej domenie, więc nie było problemu z wieloma witrynami nawigującymi po ramce DOM.

Zmodyfikowałem łącza w rodzica, więc zamiast wykonywać target="myiframe", dodałem funkcję godziny do przewijania z pominięciem domyślnej implementacji (która wydaje się powodować, że rodzic przeskoczył do elementu iframe).

funkcja

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

Link wygląda następująco:

/// 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) 
} 

Nie JQuery i nadal działa poprawnie, jeśli wyłączony javascript (tylko powróci do domyślnego dominującej skoków).

Mam nadzieję, że to pomoże komuś innemu.

Answer 5

Może to błąd w chrome, ponieważ ten problem nie występuje w najnowszym IE i Firefox.

Po kliknięciu kotwicy w elemencie iframe przeglądarka próbuje dopasować kotwicę do górnej części okna.

I rozwiązać ten problem użyciu JavaScript (jQuery):

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

mam nadzieję, że może pomóc & powodzenia!