Как я могу нацелить div внутри iframe?

Question

У меня есть элемент внутри <iframe>. Я хочу активировать, используя ссылку вне <iframe>.

Пример:

<iframe src="iframe.html" id="iframe">
    *inside the iframe*  
    <div id="activate" class="activate">
</iframe>
<a href="#activate" target="iframe">Link</a>

Я думал, что это будет работать, ноочевидно ничего не делает, потому что я тупой.Есть идеи?

Answer 1

Страница в рамке (test.html):

....... lots of content .... 
<div id="activate">Inside frame</div>

Страница, содержащая фрейм (page-containing-frame.html):

<iframe src="test.html" name="target-iframe"></iframe>
<a href="test.html#activate"
       target="target-iframe"
       onclick="frames['target-iframe'].document.getElementById('activate')
                .scrollIntoView();return false">Click</a>
^ That's the link. I've split up code over multiple lines for visibility

Объяснение

• Кадр имеет name attrbute со значением target-iframe (очевидно, вы можете выбрать любое желаемое значение).

• Ссылка содержит три атрибута, каждый из которых поддерживает два метода прокрутки к ссылке во фрейме:

  1. target="target-iframe" и href="test.html#activate"
     Это запасной метод в случае возникновения ошибки или если пользователь отключил JavaScript.
     Целью ссылки является фрейм, атрибут href должен быть путем фрейма, после которого указывается привязка, например test.hrml#activate. Этот метод приведет к тому, что страница в рамке перезагрузится . Кроме того, если привязка уже установлена ​​на #activate, этот метод больше не будет работать.
  2. Это элегантное решение, которое не подведет. Доступ к нужному кадру осуществляется через глобальный объект frames (по имени, а не по идентификатору, target-iframe). Затем якорь выбран (document.getElementById('activate').
     Наконец, метод scrollIntoView используется для перемещения элемента внутри области просмотра.
     Метод onclick оканчивается на return false, поэтому поведение по умолчанию (т.е. переход по ссылке, вызывающий обновление страницы) не происходит.

Ваш текущий код не работает из-за отсутствия атрибута name (target="..." не может совпадать с идентификаторами, только с именами). Кроме того, #activate анализируется в контексте текущей страницы, поэтому ссылка указывает на page-containing-frame.html.