Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подгрузить в src фрейма href нажатой ссылки (https://javascript.ru/forum/misc/67026-podgruzit-v-src-frejjma-href-nazhatojj-ssylki.html)

karakym 23.01.2017 21:53

Подгрузить в src фрейма href нажатой ссылки
 
Есть ссылка вида:
<a href="#targc" class="image image-full">Детальней</a>

Есть блок который отображается по нажатию на ссылке:
<div id="targc">
        <a href="#" class="close"></a>
        <iframe name="link1" id="ifrm" src="eldef.html"></iframe>
      </div>

С помощью вот таких вот стилей:
<style>#targc {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: 0.5s;
  z-index: 999;
}
#targc:target {
  pointer-events: all;
  opacity: 1;
}
#targc #ifrm {
  position: absolute;
  overflow: hidden;
  display: block;
  padding: 0;
  line-height: 1.8;
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  background: white;
  color: #34495E;
}
#targc a.close {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  opacity: 0.8;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
}
#targc a.close:hover {
  opacity: 0.4;
}</style>

Мне нужно переделать его так, что бы по нажатию на ссылку происходило событие таргета блока, а href="" передавал в src="" фрейма ссылку. Ну и открывал соб-сно блок как и прежде.

TestUser013 24.01.2017 11:52

Атрибут target не подойдет?

karakym 24.01.2017 15:47

Хорошо уловил суть, выбрал другой метод. Буду в заранее созданном
<iframe name="frmloader" src="" id="connetor" scrolling="no" frameborder="0"></iframe>

загружать src фрейма по нажатию одной из ссылок
<a href="eldef.html" target="frmloader">Def</a>
<a href="elrem.html" target="frmloader">Rem</a>
<a href="elrad.html" target="frmloader">Rad</a>

Но вот беда, фрейму заранее выставил в стилях:
#connetor {
   width: 100%;
   height: auto;
   background: red;
}

Получается по нажатию на ссылку размер фремйма не меняется и приходится видеть кусочек страницы с высотой в 100px
Вот бы как по нажатию на любой <a target="frmloader"></a>
Ресайзить фрейм до минимальной высоты загруженной внутри страницы.

karakym 24.01.2017 17:00

Пробую в событие onClick нажимаемых <A> добавить такое:
$('#connetor').css('height','100%');

TestUser013 24.01.2017 17:01

В фрейме добавьте onLoad ивент, в котором узнавайте высоту загруженного контекта и меняйте высоту самого фрейма

рони 24.01.2017 18:22

http://javascript.ru/forum/events/17....html#post5737

karakym 25.01.2017 17:05

Не получается никак. И пример выше не работает.

рони 25.01.2017 17:16

Цитата:

Сообщение от karakym
И пример выше не работает.

он не будет работать если ссылки в фрейме не ваши, может кто-то знает как узнать высоту в таком случае?

рони 25.01.2017 17:16

TestUser013, у вас есть варианты, как узнать высоту загруженного контекта ?

karakym 25.01.2017 17:57

Пробовал так:
function iframeLoaded() {
        var iFrameID = document.getElementById('connector');
        if(iFrameID) {
              iFrameID.height = "";
              iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
              iFrameID.style.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
        }   
    }

В сам фрейм добавить это:
<iframe ... onload="iframeLoaded()" ...>

Что то пытается сделать но не то.
Вот ссылка на страницу с проблемой (там нужно на вкладку "Электрощит" перейти, третья иконка сверху).


Часовой пояс GMT +3, время: 19:08.