2012-02-08 7 views
3

У меня есть страница с фиксированным заголовком div, как панель инструментов, и iframe, который загружает контент из тех же/разных доменов. Проблема заключается в том, что всякий раз, когда нажимается ссылка внутри iframe, она прокручивает страницу вверх, скрывая панель инструментов. Это происходит в браузерах рабочего стола/мобильных веб-китов.Прокрутка Iframe из-за связей внутри него

Примечание: - Я нашел причину, почему Iframe свитки родительская страница, когда какая-либо связь внутри него нажата, то получается, что если якорные теги внутри фрейма имеют пустые значения хеш-функции, то есть HREF = «#» и если они будут нажаты, это приведет к тому, что родительская страница будет прокручиваться до точки, откуда начинается iframe. Это происходит в браузерах webkit только для меня. Это не воспроизводится в FF.

+0

Можете ли вы предоставить ссылку на сайт? – NightHawk

+0

на самом деле его webapp ... и еще не полностью жив, он не может загрузить его нигде. Дайте мне знать, где я могу загрузить образец страницы. – Abhidev

ответ

-1

Попробуйте это решение JavaScript ...

function autoScroll() { 
     window.scroll(0,200); // Horizontal/Vertical Position 
    } 

    <a href='javascript:autoScroll()'>Normal Link</a> 

При нажатии, это будет автоматически прокручивать окно в определенной точке (200 пикселей вниз от верхней части). Или, вы можете иметь его автоматическую прокрутку при загрузке страницы с помощью этого:

<body onLoad="javascript:autoScroll()"> 

Хорошо, вот другое решение, которое, кажется, работает (модифицированная версия этой страницы:

переполнением стека - Scrolling an iframe with javascript?

Во-первых, сделать страницы: home.html, container.html & website.html

На home.html, поставить это:

<html> 
<head> 
<title>Home</title> 
</head> 
<frameset rows="*,1000"> 
<frame src='container.html' noresize='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'> 
<frame src='website.html' noresize='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'> 
</frameset> 
</html> 

На container.html:

<html> 
<head> 
<title>Container</title> 
</head> 
<body bgcolor='#ff0000'> 
Any content you want... 
</body> 
</html> 

На website.html:

<html> 
<head> 
<title>Website</title> 
</head> 
<body onLoad="window.scrollTo(0,150)"> 
<iframe id='iframe' src='http://www.cnn.com" height='1000' width='100%' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'> 
</iframe> 
</body> 
</html> 

Теперь вот вещь - независимо от того, на какой странице вы идете с этой стартовой страницы на cnn.com страница всегда будет сдвигаться на 150 пикселей вниз. На home.html 1000 относится к пикселам, идущим вверх от нижней части страницы вверх. Поэтому, если вы установите его на 100, вы увидите страницу container.html в верхней части браузера, а в нижней части 100 пикселей вы увидите website.html (с его содержимым смещено на 150 пикселей вниз). Причина, по которой я сделал такую ​​высоту высотой (1000), заключается в том, что она позволит использовать всю высоту окна браузера - никто даже не увидит container.html, если вы этого не хотите. Возможно, вам придется испортить значения/прокрутку/etc. чтобы получить то, что вам нужно в точности.

Это должно заставить вас работать!

+0

Ссылки находятся внутри iframe. Я не могу изменить содержимое внутри iframe. – Abhidev

+0

Значит, контент, на который вы ссылаетесь, вообще не редактируется? Если бы это было так, вы могли бы просто поместить этот код в PHP на страницы, где вам нужна прокрутка, и внутри этого файла include есть переменная _GET, активирующая механизм прокрутки. Так, например, ваш iframe может нацелиться на test.php? Activatescroll = YES, а затем код внутри этого include может включить «on» переменную сеанса, которая будет следить за тем, какая страница, которую вы посещаете на этом сайте, активирует функцию JS, которая прокручивает окна на каждой загрузке страницы. – scottcarmich

+0

Содержимое, загружаемое внутри Iframe, является третьим сторонним контентом, и я не контролирую его. Я должен обрабатывать это с моей родительской страницы. – Abhidev

1

Если вы имеете дело с проблемой в JavaScript, просто используйте этот код:

ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe) 

или

<script language="javascript"> 
    function totop() { 
     scroll(0,0); 
    } 
</script> 

и в вашем HTML для фрейма, добавьте атрибут OnLoad, как показано ниже:

<iframe name="iframe" onload="totop()"> 

Получил это 2-е решение с другого форума и изменил его на 1-й, чтобы удовлетворить мое требование, поскольку я являюсь креационистом ng в элементе iframe и настройке его свойств в javascript, а не в html. Он работал как на хром, так и на IE. У ФФ не было проблемы в первую очередь.

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