Vraag Ankers in iframes vermijden om door de bovenliggende pagina te bladeren


Dus, hier is het probleem: ik heb een vrij lange pagina met een iframe in het midden. Als nu op een anker wordt geklikt in het iframe, wordt de hele pagina naar het iframe gescrolld, wat ik wil vermijden.

Hier is een voorbeeld: http://jsfiddle.net/ymbV7/1/ Blader niet door de pagina, maar scrol door het iframe totdat u het menu "Inhoud" ziet en probeer een van de koppelingen (bijvoorbeeld "Functies").

Ik wil dat de externe pagina niet scrolt, terwijl het iframe correct naar het aangeklikte anker moet scrollen.

Om het even welke ideeën?


13
2018-03-05 15:32


oorsprong


antwoorden:


Dus je vertelt dat je naar een bepaalde alinea wilt gaan wanneer je op de link klikt die de linkdetails goed beschrijft?

Volgens wat ik begrijp, kun je dit op deze manier doen.

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

In plaats van Klik hier kun je Functies schrijven, zoals ik heb gezien http://jsfiddle.net/ymbV7/1/

nu om te linken naar de plaats waar het zou moeten gaan is alles wat je moet doen dit:

<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" is de linknaam die wordt gegeven aan de paragraaf of waarnaar u verwijst.

Het scrolt alleen het iframe en niet de hele pagina.

verwijs deze link voor meer toestemming

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

Ik heb het geprobeerd en het werkte voor mij


2
2018-06-26 08:58



Het proberen van verschillende combinaties van het instellen van de locatie van het frame of de hash resulteerde helaas helaas in het scrollen van de parent.

Dus dit is wat ik uiteindelijk deed omdat de inhoud van het iframe zich op hetzelfde domein bevond, dus er was geen cross-site probleem bij het navigeren door de DOM van het frame.

Ik heb de links in de ouder aangepast, dus in plaats van te doen target="myiframe", Ik heb een uurfunctie toegevoegd om het scrollen te doen zonder de standaardimplementatie te omzeilen (die lijkt te veroorzaken dat de ouder naar het iframe springt).

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

De link-functie ziet er als volgt uit:

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

Geen JQuery en werkt nog steeds goed als javascript uitgeschakeld is (keert gewoon terug naar de standaard bovenliggende sprong).

Ik hoop dat dit iemand anders helpt.


1
2017-12-10 17:30



Probeer je inhoud in een tabel als deze te plaatsen:

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

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


0
2018-03-06 16:55



Ik denk dat als je dat deed <a target="name of iframe" href="#name of anchor">Click here</a> het zou werken omdat de link dan wordt geopend in het iframe en dit is mogelijk de reden waarom het anker de hele pagina naar het iframe liet scrollen. Ik hoop dat ik heb geholpen en hoop dat het werkt! :)


0
2017-11-25 18:05



Misschien is het een bug in Chrome, omdat dit probleem niet voorkomt in de nieuwste IE en Firefox.

Het gebeurde toen het anker in het iframe werd aangeklikt en de browser probeerde het anker uit te lijnen boven in het venster.

Ik heb dit probleem opgelost gebruik JavaScript (jQuery):

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

Ik hoop dat het je kan helpen en veel geluk!


0
2017-08-16 17:26



Ja, je moet de links bekijken en het doen met JQuery.

$(document).on('click', 'A[href^="#"]', function(){
    var hash = $(this).attr('href');
    var o = $(hash);
    if (o.length) {
        // move it
        $("html,body").stop().animate({ scrollTop: o.offset().top }, 300, 'swing');
        if (window.frameElement) {
            // it has parent window => stop bubbling (will not change document location)
            return false;
        }
    }
});

0
2017-07-31 00:46