Передача события в iframe
Я пытаюсь расположить блок поверх iframe, чтобы тот реагировал на действия пользователя и перенаправлял события в iframe, расположенный под ним.
Это выглядит примерно так:
<html>
<head>
<style type="text/css">
#hideme{
background: #000;
z-index: 100;
position: absolute;
opacity: 0.0;
}
iframe{
position: absolute;
top: 100px;
left: 350px;
}
</style>
</head>
<body>
<iframe width="853" height="480" src="//www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
<div id="hideme"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('iframe').load(function(){
var iframe = $(this);
var hideme = $('#hideme');
hideme.width(iframe.width());
hideme.height(iframe.height());
hideme.css('left', iframe.position().left);
hideme.css('top', iframe.position().top);
hideme.on("click", function(event){
iframe.trigger(event);
});
});
</script>
</body>
</html>
Очевидно, с помощью trigger я не могу "отправить" событие айфрейму. Может кто-нибудь пояснить, почему это не работает, и вообще, возможно ли это. |
empirik,
Если фрейм на ином домене, нежели главная страница, и у Вас нет возможности установки изначально своих скриптов на домене фрейма - то никак |
iframe - это элемент текущего документа, клик происходи по нему. В iframe существует "свой мир", то есть свой документ.
Так вот надо обратиться к документу во фрейме: window.frames[0].document И вот ему уже отправляй свои события |
В конечном счете, как я понял, действительно нет возможности обращаться к айфрейму, если он расположен на другом домене.
А что если спрятать блок #hideme и вызвать событие повторно? Я попробовал вот так, но что-то не получается.
hideme.on("click", function(event){
$(this).hide();
$(document).trigger('click', event);
});
|
| Часовой пояс GMT +3, время: 10:04. |