Подгрузить в 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="" фрейма ссылку. Ну и открывал соб-сно блок как и прежде. |
Атрибут target не подойдет?
|
Хорошо уловил суть, выбрал другой метод. Буду в заранее созданном
<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> Ресайзить фрейм до минимальной высоты загруженной внутри страницы. |
Пробую в событие onClick нажимаемых <A> добавить такое:
$('#connetor').css('height','100%');
|
В фрейме добавьте onLoad ивент, в котором узнавайте высоту загруженного контекта и меняйте высоту самого фрейма
|
|
Не получается никак. И пример выше не работает.
|
Цитата:
|
TestUser013, у вас есть варианты, как узнать высоту загруженного контекта ?
|
Пробовал так:
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()" ...> Что то пытается сделать но не то. Вот ссылка на страницу с проблемой (там нужно на вкладку "Электрощит" перейти, третья иконка сверху). |
рони,
Примерно вот так? Мне кажется это будет высотой фрейма... $('iframe').load(function(){$(this).height($(this) .contents().find('html').height()}); |
karakym,
а так?
function iframeLoaded() {
var frame = document.getElementById('connector');
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = 0;
objToResize.height = innerDoc.documentElement.offsetHeight+'px';
frame.style.display = 'block'
}
|
karakym,
попробуйте этот вариант TestUser013, код ниже
$('iframe').load(function(){$(this).height($(this).contents().find('html').height())});
|
| Часовой пояс GMT +3, время: 05:37. |