2013-03-26 5 views
4

Возможно ли иметь прокрутку iFrame в прокручиваемом div и правильно ли использовать якорные ссылки внутри iFrame? Якорные ссылки внутри iFrame должны прокручиваться до места внутри iFrame, мне не нужно/нужно, чтобы они указывали на элементы на родительской странице.Якорные ссылки внутри iframe ничего не делают

Вот мой jsFiddle с простым примером:

http://jsfiddle.net/shopguy/WjmHG/

и код для него:

<div style="width: 100%; height: 300px; overflow: auto;"> 
<iframe style="width: 100%; height: 2000px;" src="http://www.hypergurl.com/anchors.html" scrolling="no"></iframe> 
</div> 

У меня нет никакой связи с этой ссылкой hypergurl.com используется в моем примере, это был только первый пример, который я мог найти на странице с якорем по синтаксической ссылке id/name.

Если вы загрузите JSFiddle и нажмите ссылку «Перейти к нижнему» внутри iFrame, он ничего не делает (тестирование с помощью FireFox 19.0.2). При тестировании на разных страницах он никогда не работает в FireFox, в Chrome он иногда срабатывает при первом нажатии, но затем, если вы прокручиваете вверх и щелкаете снова, это не работает. В IE8 он работает (прокручивает) большую часть времени.

Прокрутка работает правильно все время, если я позволю самому iFrame иметь полосы прокрутки (удалить прокрутку = "нет"). Это не практическое решение для меня, хотя, поскольку у меня есть контент вне рамки, который я хочу прокрутить вместе с ним. В моем реальном коде я динамически устанавливаю высоту iFrame, чтобы заполнить его контент, таким образом, он больше похож на контент на моей странице.

Дополнительная информация о том, почему мне нужно сделать это:

Я создаю веб-клиент электронной почты, и до сих пор там, кажется, наименьшее количество вопросов, если я отображать HTML тело сообщения электронной почты внутри iframe, против попытки отобразить внутри ячейки таблицы или div внутри моей страницы. Я бы хотел, чтобы эти типы ссылок работали. У меня есть некоторый контроль над контентом, он исходит от моего сервера, и я могу его немного модифицировать (но не хочу слишком сильно его взломать). Например, я уже изменяю все ссылки для открытия в новом окне (но не ссылки, начинающиеся с #, так что это не моя проблема).

Я знаю, что GMail не использует iFrames, но мой почтовый клиент XFINITY (по Comcast) работает, и им удалось заставить их работать (но пока не выяснили, что они делают).

+0

https://bugzilla.mozilla.org/show_bug.cgi?id=638598 может быть связано, но я вижу это и в браузерах веб-кит, а не только в Mozilla. Кроме того, я видел страницы, которые не имеют этой проблемы.Те, которые работают, загружают содержимое iFrame из JavaScript, но не атрибутом src, поэтому, возможно, это работает только в том случае, если я изменю свой дизайн на это (будет много работы)? – eselk

ответ

2

Заканчивать этот пост: Jump Link Inside an iFrame

Если IFrame имеет другой домен, то вы не сможете использовать яваскрипт решения для решения этой проблемы, но если после этого вы можете добавить TARGET = «_ родительский» атрибут ко всем якорям внутри iframe.

var iframe = document.getElementById('iframeId'); 
var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document; 

var anchors = doc.getElementsByTagName('a'); 
for (var i = 0; i < anchors.length; i++) 
    anchors[i].target = '_parent'; 
0

Я недавно добавил код в эту библиотеку, чтобы разобраться со всей проблемой с привязными ссылками внутри iFrame.

https://github.com/davidjbradshaw/iframe-resizer

Он перехватывает все запросы на странице в навигации и прокручивает родительскую страницу в правильное положение. Если он не найдет якорь в iFrame, он пузырится на родительскую страницу и ищет его там.

Смежные вопросы