Итак, вот проблема: у меня довольно длинная страница с iframe посередине. Теперь, если в iframe щелкнут якорь, вся страница прокручивается в iframe, чего я хочу избежать.
Вот пример: http://jsfiddle.net/ymbV7/1/ Не прокручивайте страницу вниз, но прокрутите iframe, пока не увидите меню "Содержание", и попробуйте любую из ссылок (например, "Возможности" ).
Мне нужно, чтобы внешняя страница не прокручивалась, в то время как iframe должен правильно прокручивать до щелкнутого якоря.
Любые идеи?
Итак, вы говорите, что хотите перейти к конкретному абзацу при нажатии на ссылку, которая правильно описывает детали ссылок?
В соответствии с тем, что я понимаю, вы можете сделать это.
<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
Я пробовал, и это сработало для меня
Попытка различных комбинаций установки расположения фрейма или хэша, к сожалению, привела к прокрутке родительского элемента.
Итак, это то, что я закончил, так как содержимое 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 отключен (просто возвращается к родительскому прыжку по умолчанию).
Надеюсь, это поможет кому-то еще.
Попытайтесь разместить свой контент в таблице следующим образом:
<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
Я думаю, что если бы вы выполнили <a target="name of iframe" href="#name of anchor">Click here</a>, это сработало бы, потому что тогда ссылка открывается в iframe, и это возможно, почему якорь делает всю страницу прокруткой к iframe. Надеюсь, я помог и надеюсь, что это сработает!:)
Возможно, это ошибка в chrome, потому что эта проблема не возникает в последних IE и Firefox.
Это произошло, когда щелкнул якорь в iframe, и браузер попытался выровнять привязку в верхней части окна.
Я решил эту проблему использовать JavaScript (jQuery):
$('body').on('click', 'a', function(e) {
if($(this).attr('href').startsWith('#')) {
e.preventDefault();
}
});
Надеюсь, это поможет вам и удачи!