jQuery/CSS - измените высоту IFRAME при нажатии кнопки внутри содержимого iframe

Я работаю над простым скриптом HTML/jQuery. Прямо сейчас, когда я нажимаю кнопку, которая находится внутри iframe, она меняет высоту iframe, которая вызывает контент с помощью кнопки.jQuery/CSS - измените высоту IFRAME при нажатии кнопки внутри содержимого iframe

Взгляните на код:

<div id="outerdiv" style="padding:20px;border:2px solid red;"> 
    <iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe> 
</div>

Вот содержание iframe.php:

<HTML> 
<head> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<div style="display:block;height:300px;"> 
    <h3>The iframe content</h3> 
     <button type="button" id="SuperWebF1">Click me to resize the holding Iframe!</button> 
    </div> 
    <script type="text/javascript"> 
    $("#SuperWebF1").click(function(){ 
     $('#inneriframe', window.parent.document).animate({height:'900px'}, 500); 

    }) 
    </script>

Проблема приходит, когда я пытаюсь добавить это:

<style> 
#outerdiv 
{ 
    width:400px; 
    height:300px; 
    overflow:hidden; 
    position:relative; 
    border:2px solid #fff; 
} 

#inneriframe 
{ 
    position:absolute; 
    width:400px; 
    height:700px; 
    border:0px; 
} 
</style> 

<div id="outerdiv" style="padding:20px;border:2px solid red;"> 
    <iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe> 
</div>

Как вы можете видеть, я добавил тег <style>, где я добавил CSS для элементов outerdiv и iframe inerriframe, и теперь, когда я нажимаю на кнопку, это не изменение высоты iframe.

Когда я удаляю теги <style>....</style> и весь контент внутри них, скрипт начинает работать снова.

Демоверсия: http://beta.sportsdirect.bg/test/ Это рабочая демонстрация, когда я не добавил теги <style></style>.

Можете ли вы помочь мне настроить CSS для этих элементов и создать скрипт jQuery?

Заранее благодарен!

источник

2014-10-31 user2942786

Событие не срабатывает, когда функция не загружена полностью на странице iframe.

Вместо:

<script type="text/javascript"> 
$("#SuperWebF1").click(function(){ 
    $('#inneriframe', window.parent.document).animate({height:'900px'}, 500); 

}); 
</script>

Использование:

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#SuperWebF1").on('click',function(){ 
    $('#inneriframe', window.parent.document).animate({height:'900px'}, 500); 

}); 
}); 
</script>

Для того, чтобы слушать click случае, когда все .css, .js и целые документы на странице полностью готовы.

Надеюсь, это поможет?

источник

2014-11-01 00:40:28

jQuery/CSS - измените высоту IFRAME при нажатии кнопки внутри содержимого iframe

ответ

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