Как избежать привязки в iframes для прокрутки родительской страницы

Question

Итак, вот проблема: у меня довольно длинная страница с iframe посередине.Теперь, если щелкнуть привязку в iframe, вся страница прокручивается до iframe, чего я хочу избежать.

Вот пример: http://jsfiddle.net/ymbV7/1/ Не прокручивайте внизстраницы, но прокручивайте iframe, пока не увидите меню «Содержимое», и попробуйте любую из ссылок (например, «Функции»).

Мне нужна внешняя страница, чтобы не прокручивать, в то время как iframe долженправильно прокрутите до привязанного якоря.

Есть идеи?

Answer 1

Итак, вы говорите, что хотите перейти к определенному абзацу, когда нажимаете на ссылку, которая описывает детали ссылки, верно?

Согласно тому, что я понимаю, вы можете сделать это следующим образом.

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

Вместо Нажмите здесь, вы можете написать Функции, начиная с того, что я видел в http://jsfiddle.net/ymbV7/1/

сейчас, чтобы ссылаться на место, куда он должен двигаться, все что вам нужно сделать, это:

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

«точная линия» - это имя ссылки, данное параграфу или заголовку, на который вы ссылаетесь.

Он прокручивает только iframe, а не всю страницу.для большей очистки

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

Я пытался, и у меня это сработало

Answer 2

Попытка различных комбинаций установки местоположения фрейма или хэша все же, к сожалению, привела к прокрутке родительского элемента.

Итак, это то, что я в итоге сделал, так как содержимое iframe находилось в одном домене, поэтому не быломежсайтовая проблема при навигации по фрейму DOM.

Я изменил ссылки в родительском элементе, поэтому вместо выполнения target="myiframe" я добавил функцию «o'clock» для прокрутки в обход реализации по умолчанию (что, кажется, приводит кродительский элемент для перехода к iframe).

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

Функция ссылки выглядит следующим образом:

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

Нет JQuery и по-прежнему работает должным образом, если отключен JavaScript (просто возвращается к родительскому элементу по умолчанию)прыжки).

Надеюсь, это поможет кому-то еще.

Answer 3

Да, вы должны смотреть ссылки и делать это с помощью 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;
        }
    }
});

Answer 4

Может быть, это ошибка в Chrome, потому что эта проблема не возникает в последних версиях IE и Firefox.

Это происходит при нажатии на ссылку в iframe, и браузер пытается выровнять привязку по верху окна.

Я решил эту проблему, используя JavaScript (jQuery):

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

Надеюсь, это поможет вам и удачи!

Answer 5

Я думаю, что если бы вы сделали <a target="name of iframe" href="#name of anchor">Click here</a>, это сработало бы, потому что тогда ссылка открывалась в iframe, и, возможно, именно поэтому якорь заставлял всю страницу прокручиваться до iframe. Надеюсь, я помог и надеюсь, что это работает! :)

Answer 6

Постарайтесь поместить свой контент в таблицу следующим образом:

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

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